Скачать design angular kit - design angular kit Code скачать

Угловой дизайн комплекта

Прочитайте это на других языках: английский ??.

️ Если вам нужна старая версия, код и его документация можно найти здесь.

Комментарии и вклад всего сообщества более чем приветствуются! ?

Вступление

Design Angular Kit - это набор угловых компонентов, который реализует Bootstrap Italia и стили на дизайне набора пользовательского интерфейса. Общественная версия документации библиотеки доступна здесь для последнего опубликованного стабильного выпуска, в то время как здесь для версии разработки, относящейся к Machine main . Чтобы поиграть с библиотекой, доступен Angular Kit Playground.

Индекс

Как использовать комплект
Как внести свой вклад
Как внести свой вклад в код
Полезные ссылки

Как использовать комплект

Design Angular Kit доступен на NPM, чтобы установить его на существующее приложение, на котором можно попробовать библиотеку, запустите команду

npm install design-angular-kit --save

Выберите версию, соответствующую вашей угловой версии:

Угловой	Дизайн-Ангел-Кит
18+	V1.1.0 +
17+	V1.0.0 +

В качестве альтернативы, вы можете запустить команду

ng add design-angular-kit --project < projectName >

Будет выступать в серии:

Выбор правильной версии, который будет установлен
Установка зависимости
Добавление зависимости в package.json
Конфигурация приложения

Следующие инструкции абзаца, конфигурация , будут выполнены автоматически, за исключением персонализации конфигурации I18N .

Конфигурация

Конфигурация приложения

Книжный магазин design-angular-kit может использоваться со стандартными компонентами или с приложением, которое использует модули. Следуйте разделу конфигурации, который соответствует вашему приложению.

Автономное применение

Используйте функцию provideDesignAngularKit для настройки приложения ApplicationConfig для инициализации функциональности библиотеки.

 import { provideDesignAngularKit } from 'design-angular-kit' ;

export const appConfig : ApplicationConfig = {
  providers : [ ... provideDesignAngularKit ( ) ] ,
} ;

Модульное применение

Необходимо импортировать DesignAngularKitModule в основной форме приложения (обычно называемой AppModula ), используя метод forRoot , чтобы иметь возможность инициализировать функциональность библиотеки и импортировать все компоненты .

 import { DesignAngularKitModule } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [ ... DesignAngularKitModule . forRoot ( ) ] ,
} )
export class AppModule { }

Используйте метод forChild во время импорта модуля DesignAngularKitModule в других прикладных модулях, чтобы импортировать все компоненты библиотеки.

 import { DesignAngularKitModule } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [ ... DesignAngularKitModule . forChild ( ) ] ,
  exports : [ DesignAngularKitModule ] ,
} )
export class SharedModule { }

Гибридное приложение

Если в вашем приложении есть модуль AppModule , но вы хотите использовать наши компоненты с автономной конфигурацией , используйте функцию provideDesignAngularKit в основной форме приложения для инициализации функциональности библиотеки.

 import { provideDesignAngularKit } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [ ] ,
  providers : [ provideDesignAngularKit ( ) ] ,
} )
export class AppModule { }

Параметры конфигурации

Как для функции provideDesignAngularKit , так и для DesignAngularKitModule.forRoot() можно использовать начальную конфигурацию DesignAngularKitConfig .

 import { provideDesignAngularKit , DesignAngularKitModule , DesignAngularKitConfig } from 'design-angular-kit' ;

// Puoi aggiungere alla libreria una configurazione iniziale
const initConfig : DesignAngularKitConfig | undefined = {
  /**
   * The bootstrap-italia asset folder path
   * @default ./bootstrap-italia
   */
  assetBasePath : string | undefined ,

  /**
   * Load the <a href="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts">bootstrap-italia fonts</a>
   * @default true
   */
  loadFont : boolean | undefined ,

  ...
} ;

provideDesignAngularKit ( initConfig )

DesignAngularKitModule . forRoot ( initConfig )

Импорт стилей начальной загрузки

Настройте стили, запрашиваемые в файле styles.scss . Это имеет значение библиотеку SCSS, как показано в примере ниже.

 // Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;

Как настроить и перезаписать переменные по умолчанию библиотеки (например, цвета, семейство шрифтов, меры и т. Д.)

Bootstrap Italia наследует и расширяет все переменные по умолчанию Bootstrap, перезаписывая некоторые значения на этапе компиляции и устанавливая новые для возникновения. Примером всех является основная стоимость цвета $, представленную синим цветом #006CCC в начальной загрузке, типичной для библиотеки.

Однако использование синего #0066CC должно быть зарезервировано для центральных администраций штата, и, следовательно, вы можете оказаться в условиях необходимости настроить значения цветовых переменных Bootstrap Italia, устанавливая новые значения для ваших потребностей.

Этот цвет и другие оттенки генерируются, начиная с HSB Terna, поэтому первичные H-переменные должны быть изменены, первичный и первичный B. Чтобы иметь соответствие между шестнадцатеричным значением цвета и HSB, можно использовать портал RGB.TO, например, https://rgb.to/0066CC.

Ниже приведен пример файлов styles.scss с настройкой цветов. Настройки переменных всегда должны быть сделаны перед импортом файла bootstrap-italia.scss

 // modifica completa del template: è possibile ricompilare la libreria modificando alcune variabili SCSS

// Per l'override del colore $primary della palette in formato HSB (colore #FF3333 https://rgb.to/ff3333):
$primary-h : 0 ;
$primary-s : 80 ;
$primary-b : 100 ;

// Per l'override della famiglia di caratteri
$font-family-serif : ' Custom Font ' , Georgia , serif ;
$font-family-sans-serif : ' Custom Font ' , Arial , Helvetica , sans-serif ;
$font-family-monospace : ' Custom Font ' , ' Courier New ' , Courier , monospace ;

// Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;

Поддержка иконы и активов

Чтобы добавить поддержку значков/активов, измените свой angular.json добавить:

{
 "assets" : [
    ...
    {
      "glob" : " **/* " ,
      "input" : " ./node_modules/bootstrap-italia/ " ,
      "output" : " /bootstrap-italia/ "
    }
  ]
}

Поддержка I18N (местоположение)

US NGX-Translate Bookshop, чтобы добавить локализацию I18N.

Измените свой angular.json добавить:

{
  "assets" : [
    ...
    {
      "glob" : " **/* " ,
      "input" : " ./node_modules/design-angular-kit/assets/i18n " ,
      "output" : " /bootstrap-italia/i18n/ "
    }
  ]
}

Вы можете использовать локализованные этикетки библиотеки design-angular-kit в вашем приложении, например, {{'it.errors.required-field' | translate}} . Смотрите наши ярлыки

Существующее местоположение

Если вы уже используете файлы местоположения в вашем приложении, вы можете использовать книжный магазин NGX-Translate-Multi-HTTP-Loder для загрузки как файлов местоположения, так и файлов приложения design-angular-kit

Использование функции provideDesignAngularKit :

 import { HttpBackend } from '@angular/common/http' ;
import { TranslateLoader } from '@ngx-translate/core' ;
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader' ;
import { provideDesignAngularKit } from 'design-angular-kit' ;

provideDesignAngularKit ( {
  translateLoader : ( itPrefix : string , itSuffix : string ) => ( {
    provide : TranslateLoader ,
    useFactory : ( http : HttpBackend ) =>
      new MultiTranslateHttpLoader ( http , [
        { prefix : itPrefix , suffix : itSuffix } , // Load library translations first, so you can edit the keys in your localization file
        { prefix : './assets/i18n/' } , // Your i18n location
      ] ) ,
    deps : [ HttpBackend ] ,
  } ) ,
} ) ;

Используя модуль DesignAngularKitModule :

 import { HttpBackend } from '@angular/common/http' ;
import { TranslateLoader } from '@ngx-translate/core' ;
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader' ;
import { DesignAngularKitModule } from 'design-angular-kit' ;

DesignAngularKitModule . forRoot ( {
  translateLoader : ( itPrefix : string , itSuffix : string ) => ( {
    provide : TranslateLoader ,
    useFactory : ( http : HttpBackend ) =>
      new MultiTranslateHttpLoader ( http , [
        { prefix : itPrefix , suffix : itSuffix } , // Load library translations first, so you can edit the keys in your localization file
        { prefix : './assets/i18n/' } , // Your i18n location
      ] ) ,
    deps : [ HttpBackend ] ,
  } ) ,
} ) ;

Персонализация местоположения

Если вы хотите настроить наши ярлыки:

Не включайте поддержку I18N в angular.json
- Создайте персонализированные файлы местоположения в ваших assets/bootstrap-italia/i18n/ (Создайте путь, если он не существует) Папка
- JSON должен иметь этот формат.
- Добавьте пользовательский translateLoader в начальную конфигурацию библиотеки, заменив атрибут assets/bootstrap-italia/i18n/ itPrefix
Или добавьте локализацию в файлы JSON, перезаписывая ключи JSON в библиотеку.

Использовать

Используя модуль DesignAngularKitModule , все компоненты библиотеки будут импортированы в приложение.

В качестве альтернативы, поскольку все наши компоненты и директивы являются автономными , вы можете импортировать только необходимые компоненты/модули, например, Блюдо, страдание и широкопроката.

 import { ItAlertComponent , ItPaginationComponent , ItBreadcrumbsModule } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [
    ItAlertComponent ,
    ItPaginationComponent ,
    ItBreadcrumbsModule , // Include ItBreadcrumbComponent e ItBreadcrumbItemComponent
  ] ,
} )
export class YourAppModule { }

 import { ItAlertComponent , ItPaginationComponent , ItBreadcrumbsModule } from 'design-angular-kit' ;

@ Component ( {
  selector : 'app-product' ,
  standalone : true ,
  imports : [ ItAlertComponent , ItPaginationComponent , ItBreadcrumbsModule ] ,
  templateUrl : './product.component.html' ,
} )
export class ProductComponent { }

Как внести свой вклад?

? Можно внести свой вклад в библиотеку по -разному:

Благодаря вашему коду, отвечая за проблему среди тех, кто открыт, и еще не назначенные среди вопроса Angular Kit (комментарий по этому вопросу также достаточно, чтобы уведомить желание взять на себя ответственность).
Благодаря отчету об ошибках или улучшениях официального репозитория углового комплекта.
Написание на выделенном канале Slack.

Как внести свой вклад в код

Хотели бы вы помочь в дизайне Angular Kit? Вы находитесь в нужном месте!

Если вы еще этого не сделали, начните с потратить несколько минут, чтобы углубить свои знания на руководящие принципы проектирования для веб -сервисов PA, и обратитесь к указаниям о том, как внести свой вклад в дизайн углового комплекта.

Установите локальную среду

Минимальные требования вашей местной среды должны быть:

Nodejs (> = 20)

На этом этапе необходимо установить вашу локальную среду для сборки исходного файла и генерации документации:

Клонировать проект

 git clone https://github.com/italia/design-angular-kit.git

В папке проекта установите пристрастия

 npm i

Запустить приложение локально

 npm run start

Чтобы провести тесты единиц, запустите команду

 npm run test

Установите локальную среду с DevContainer

Минимальные требования вашей местной среды для работы с DevContainer должны быть:

Visual Studio Code
Докер
git

Запустите Visual Studio Code и установите расширение контейнеров Microsoft Dev (MS-VSCODE-REMOTE.REMO-CONCAINERS).

На этом этапе необходимо установить следующие шаги:

Клонировать проект

 git clone https://github.com/italia/design-angular-kit.git

Откройте папку Project с помощью кода Visual Studio
При загрузке код Visual Studio распознает подарки конфигурации DevCContainer. Откройте проект с DevContainer. Больше информации здесь.
Visual Studio Code выполнит настройку контейнера, собираясь установить правильную версию Nodejs, NPM и расширения идеи. Проектные зависимости будут установлены в процессе создания контейнера. Швейцарская среда будет готова к завершению настройки.
Запустить приложение локально

 npm run start

Чтобы провести тесты единиц, запустите команду

 npm run test

Полезные ссылки

Игровая угловая комплект
Предварительный просмотр Vercel (обновлена для каждого коммитировки)

От сообщества

ВИДЕО КОМИТЕЛЬ УНИВЕРСИТЕТ: Разработайте с нуля для углового веб -приложения для PA (слайд)
Видео встречи Агулярная Рим: Агола, начальная начальная школа и за ее пределами ..