design angular kit
v1.1.4
これを他の言語で読む：英語??。
コミュニティ全体からのコメントと貢献は大歓迎です！ ？
Design Angular Kitは、 Bootstrap ItaliaとUIキットデザインのスタイルを実装する角度コンポーネントのセットです。ライブラリのドキュメントのパブリックバージョンは、Branch mainに関連する開発バージョンについては、ここで公開されている最新の安定したリリースのためにここで入手できます。ライブラリで遊ぶために、Playground Angularキットを利用できます。
Design AngularキットはNPMで利用でき、ライブラリを試すために既存のアプリケーションにインストールして、コマンドを実行します
npm install design-angular-kit --save角度バージョンに対応するバージョンを選択します。
| 角度 | デザイン - 角キット |
|---|---|
| 18+ | v1.1.0 + |
| 17+ | v1.0.0 + |
または、コマンドを起動することもできます
ng add design-angular-kit --project < projectName >シリーズで実行されます：
I18N構成のパーソナライズを除き、次の段落命令である構成は自動的に実行されます。
design-angular-kit書店は、標準コンポーネントまたはモジュールを使用するアプリケーションで使用できます。アプリケーションに対応する構成セクションに従ってください。
ApplicationConfigアプリケーションを構成する際に、 provideDesignAngularKit関数を使用して、ライブラリの機能を初期化できるようにします。
import { provideDesignAngularKit } from 'design-angular-kit' ;
export const appConfig : ApplicationConfig = {
providers : [ ... provideDesignAngularKit ( ) ] ,
} ; forRootメソッドを使用して、メインアプリケーションフォーム（通常はAppModulaと呼ばれる）内にDesignAngularKitModuleインポートして、ライブラリの機能を初期化し、すべてのコンポーネントをインポートできるようにする必要があります。
import { DesignAngularKitModule } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ... DesignAngularKitModule . forRoot ( ) ] ,
} )
export class AppModule { }他のアプリケーションモジュールにDesignAngularKitModuleモジュールをインポートする際に、 forChildメソッドを使用して、ライブラリのすべてのコンポーネントをインポートします。
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は、ブートストラップのすべてのデフォルト変数を継承して拡張し、コンピレーションフェーズのいくつかの値を上書きし、発生に新たに設定します。すべての例は、ライブラリに典型的なブートストラップイタリアの青＃006ccc色で表される$プライマリカラー値です。
ただし、青い＃0066CCの使用は州の中央管理のために予約されるべきであるため、ブートストラップイタリアの色変数の値をカスタマイズしなければならない状態で自分自身を見つけることができます。
この色とその他の色合いは、HSBテルナから生成されるため、プライマリH変数、プライマリSおよびプライマリ-Bを変更する必要があります。色の16進価値とHSBの対応を得るには、https：//rgb.to/0066ccなど、RGB.TOポータルを使用できます。
以下は、色のカスタマイズを備えた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/ "
}
]
}米国のNGX翻訳書場で、I18Nのローカリゼーションを追加します。
angular.jsonを変更する追加：
{
"assets" : [
...
{
"glob" : " **/* " ,
"input" : " ./node_modules/design-angular-kit/assets/i18n " ,
"output" : " /bootstrap-italia/i18n/ "
}
]
}たとえば{{'it.errors.required-field' | translate}} 、アプリケーションでdesign-angular-kitライブラリのローカライズされたラベルを使用できます。 {{'it.errors.required-field' | translate}} 。私たちのラベルを参照してください
アプリ内のロケーションファイルを既に使用している場合は、NGX-Translate-Multi-HTTP-Loder Bookshopを使用して、アプリの位置ファイルと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 ] ,
} ) ,
} ) ; ラベルをカスタマイズしたい場合：
angular.jsonにi18nサポートを含めないでくださいassets/bootstrap-italia/i18n/ （存在しない場合はパスを作成）フォルダーにパーソナライズされたロケーションファイルを作成します。translateLoaderライブラリの初期構成に追加し、 assets/bootstrap-italia/i18n/ itPrefix属性を置き換えます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のデザインをお手伝いしますか？あなたは正しい場所にいます！
まだ行っていない場合は、PA Webサービスの設計ガイドラインに関する知識を深めるために数分を費やすことから始め、Angular Kitのデザインに貢献する方法に関する適応症を参照してください。
ローカル環境の最小要件は次のとおりです。
この時点で、ソースファイルの編集とドキュメントの生成のためにローカル環境を設定する必要があります。
git clone https://github.com/italia/design-angular-kit.git
npm i
npm run start
npm run test
DevContainerと連携するための地元の環境の最小要件は次のとおりです。
Visual Studioコードを開始し、Microsoftの開発コンテナ拡張機能（MS-VSCODE-REMOTE.REMO-CONCAINERS）をインストールします。
この時点で、次の手順に従う必要があります。
git clone https://github.com/italia/design-angular-kit.git
Visual Studioコードでプロジェクトフォルダーを開きます
読み込み時に、Visual Studioコードは、DevCcontainerの構成のプレゼントを認識します。 DevContainerでプロジェクトを開きます。詳細については、こちらをご覧ください。
Visual Studioコードはコンテナのセットアップを実行し、NodeJS、NPMの正しいバージョン、およびアイデアの拡張機能をインストールします。プロジェクト中毒は、コンテナの作成プロセスに設置されます。スイスの環境はセットアップの準備が整います。
アプリケーションをローカルに起動します
npm run start
npm run test
このライブラリの開発を可能にしてくれた人に感謝します
 |  |  |
|---|---|---|
| アントニーノ・ボナンノ | クリスティアン・ボレリ | Alessio Napolitano |
特にNetServiceチームに感謝します。
すべての貢献者（貢献者IMGで作られた）
