design angular kit
v1.1.4
Lisez ceci dans d'autres langues: anglais ??.
Les commentaires et les contributions de toute la communauté sont plus que les bienvenus! ?
Le kit angulaire de conception est un ensemble de composants angulaires qui implémente Bootstrap Italia et les styles sur la conception du kit d'interface utilisateur. La version publique de la documentation de la bibliothèque est disponible ici pour la dernière version stable publiée, tandis que pour la version de développement relative à la branche main . Pour jouer avec la bibliothèque, le kit angulaire de terrain de jeu est disponible.
Le kit angulaire de conception est disponible sur NPM, pour l'installer sur une application existante sur laquelle pour essayer la bibliothèque, exécutez la commande
npm install design-angular-kit --saveChoisissez la version correspondant à votre version angulaire:
| Angulaire | Design-angulaire-kit |
|---|---|
| 18+ | V1.1.0 + |
| 17+ | V1.0.0 + |
Alternativement, vous pouvez lancer la commande
ng add design-angular-kit --project < projectName >Procernera en série:
Les instructions de paragraphe suivantes, la configuration , seront effectuées automatiquement, à l'exception de la personnalisation de la configuration i18n .
La librairie de design-angular-kit peut être utilisée avec les composants standard ou avec l'application qui utilise les modules. Suivez la section de configuration qui correspond à votre application.
Utilisez la fonction provideDesignAngularKit pour configurer l'application ApplicationConfig pour pouvoir initialiser les fonctionnalités de la bibliothèque.
import { provideDesignAngularKit } from 'design-angular-kit' ;
export const appConfig : ApplicationConfig = {
providers : [ ... provideDesignAngularKit ( ) ] ,
} ; Il est nécessaire d'importer DesignAngularKitModule dans le formulaire d'application principal (généralement appelé appmodula ) en utilisant la méthode forRoot pour pouvoir initialiser la fonctionnalité de la bibliothèque et importer tous les composants .
import { DesignAngularKitModule } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ... DesignAngularKitModule . forRoot ( ) ] ,
} )
export class AppModule { } Utilisez la méthode forChild lors de l'importation du module DesignAngularKitModule dans d'autres modules d'application pour importer tous les composants de la bibliothèque.
import { DesignAngularKitModule } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ... DesignAngularKitModule . forChild ( ) ] ,
exports : [ DesignAngularKitModule ] ,
} )
export class SharedModule { } Si dans votre application, il y a le module AppModule mais que vous souhaitez utiliser nos composants avec la configuration autonome , utilisez la fonction provideDesignAngularKit dans le formulaire d'application principal afin d'initialiser la fonctionnalité de la bibliothèque.
import { provideDesignAngularKit } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ] ,
providers : [ provideDesignAngularKit ( ) ] ,
} )
export class AppModule { } À la fois pour la fonction provideDesignAngularKit et pour le DesignAngularKitModule.forRoot() il est possible d'utiliser une configuration initiale 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 ) Configurez les styles demandés dans le fichier styles.scss . Il importe la bibliothèque SCSS comme indiqué dans l'exemple ci-dessous.
// Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;Bootstrap Italia hérite et étend toutes les variables par défaut de bootstrap, écrasant certaines valeurs dans la phase de compilation et définissant de nouvelles surdans. Un exemple de tous est la valeur de couleur Primary $ qui est représentée par la couleur bleue # 006CCC dans Bootstrap Italia, typique de la bibliothèque.
L'utilisation de Blue # 0066CC doit cependant être réservée aux administrations centrales de l'État, et donc vous pouvez vous retrouver dans la condition de personnaliser les valeurs des variables de couleur de Bootstrap Italia, de définir de nouvelles valeurs pour vos besoins.
Cette couleur et d'autres nuances sont générées à partir de la Terna HSB, donc les variables primaires-H doivent être modifiées, primaire-S et primaire-B. Pour avoir la correspondance entre la valeur hexadécimale de la couleur et du HSB, le portail RGB.to peut être utilisé, par exemple https://rgb.to/0066cc.
Vous trouverez ci-dessous un exemple de fichiers styles.scss avec la personnalisation des couleurs. Les personnalisations des variables doivent toujours être faites avant d'importer le fichier 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 ' ; Pour ajouter une prise en charge des icônes / actifs, modifiez votre angular.json Ajouter:
{
"assets" : [
...
{
"glob" : " **/* " ,
"input" : " ./node_modules/bootstrap-italia/ " ,
"output" : " /bootstrap-italia/ "
}
]
}La librairie US NGX-Translate pour ajouter les localisations i18n.
Modifiez votre angular.json ajout:
{
"assets" : [
...
{
"glob" : " **/* " ,
"input" : " ./node_modules/design-angular-kit/assets/i18n " ,
"output" : " /bootstrap-italia/i18n/ "
}
]
} Vous pouvez utiliser les étiquettes localisées de la bibliothèque design-angular-kit dans votre application, par exemple {{'it.errors.required-field' | translate}} . Voir nos étiquettes
Si vous utilisez déjà les fichiers de localisation de votre application, vous pouvez utiliser la librairie NGX-Translate-Multi-Http-Loder pour télécharger à la fois les fichiers de localisation de l'application et ceux de la bibliothèque design-angular-kit
Utilisation de la fonction 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 ] ,
} ) ,
} ) ; Utilisation du module 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 ] ,
} ) ,
} ) ; Si vous souhaitez personnaliser nos étiquettes:
angular.jsonassets/bootstrap-italia/i18n/ (créez le dossier si il n'existe pas)translateLoader personnalisé à la configuration initiale de la bibliothèque, en remplaçant l'attribut assets/bootstrap-italia/i18n/ itPrefix À l'aide du module DesignAngularKitModule , tous les composants de la bibliothèque seront importés dans l'application.
Alternativement, comme tous nos composants et directives sont autonomes , vous ne pouvez importer que les composants / modules dont vous avez besoin, par exemple Alerte, pagination et croquette.
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 { } ? Il est possible de contribuer à la bibliothèque de diverses manières:
Souhaitez-vous aider sur le kit angulaire de conception? Vous êtes au bon endroit!
Si vous ne l'avez pas déjà fait, commencez par passer quelques minutes pour approfondir vos connaissances sur les directives de conception pour les services Web de l'AP et référez-vous aux indications sur la façon de contribuer à la conception du kit angulaire.
Les exigences minimales de votre environnement local doivent être:
À ce stade, il est nécessaire de définir votre environnement local pour la compilation du fichier source et la génération de la documentation:
git clone https://github.com/italia/design-angular-kit.git
npm i
npm run start
npm run test
Les exigences minimales de votre environnement local pour travailler avec DevContainer doivent être:
Démarrez le code Visual Studio et installez l'extension des conteneurs Dev Microsoft (MS-VScode-Remote.remo-Concainers).
À ce stade, il est nécessaire de définir les étapes suivantes:
git clone https://github.com/italia/design-angular-kit.git
Ouvrez le dossier du projet avec Visual Studio Code
Au chargement, Visual Studio Code reconnaîtra les cadeaux de la configuration d'un DevcContainer. Ouvrez le projet avec le DevContainer. Plus d'informations ici.
Visual Studio Code effectuera la configuration du conteneur, ira installer la version correcte de NodeJS, NPM et les extensions de l'idée. Les dépendances du projet seront installées dans le processus de création du conteneur. L'environnement suisse sera prêt pour la configuration terminée.
Lancez l'application localement
npm run start
npm run test
Un merci spécial à ceux qui ont rendu possible le développement de cette bibliothèque
 |  |  |
|---|---|---|
| Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
Et merci en particulier à l'équipe NetService:
Tous les contributeurs ( faits avec des contributions-IMG )
