design angular kit
v1.1.4
Read This in Other Languages: English ??.
Comments and contributions from the whole community are more than welcome! ?
Design Angular Kit is a set of Angular components that implements Bootstrap Italia and the styles on the UI KIT design. The public version of the documentation of the library is available here for the latest stable release published, while here for the development version relating to the Branch main . To play with the library, the Playground Angular Kit is available.
Design Angular Kit is available on NPM, to install it on an existing application on which to try the library, run the command
npm install design-angular-kit --saveChoose the version corresponding to your Angular version:
| Angular | Design-ANGULAR-KIT |
|---|---|
| 18+ | V1.1.0 + |
| 17+ | V1.0.0 + |
Alternatively, you can launch the command
ng add design-angular-kit --project < projectName >Will perform in series:
The following paragraph instructions, configuration , will be carried out automatically, except for the personalization of the I18N configuration.
The design-angular-kit bookshop can be used with the standard components or with the application that uses the modules. Follow the configuration section that corresponds to your application.
Use the provideDesignAngularKit function in configuring the ApplicationConfig application to be able to initialize the functionality of the library.
import { provideDesignAngularKit } from 'design-angular-kit' ;
export const appConfig : ApplicationConfig = {
providers : [ ... provideDesignAngularKit ( ) ] ,
} ; It is necessary to import DesignAngularKitModule within the main application form (usually called Appmodula ) using the forRoot method to be able to initialize the functionality of the library and import all the components .
import { DesignAngularKitModule } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ... DesignAngularKitModule . forRoot ( ) ] ,
} )
export class AppModule { } Use the forChild method during the import of the DesignAngularKitModule module in other application modules to import all the components of the library.
import { DesignAngularKitModule } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ... DesignAngularKitModule . forChild ( ) ] ,
exports : [ DesignAngularKitModule ] ,
} )
export class SharedModule { } If in your application there is the AppModule Module but you want to use our components with the Standalone configuration , use the provideDesignAngularKit function within the main application form in order to initialize the functionality of the library.
import { provideDesignAngularKit } from 'design-angular-kit' ;
@ NgModule ( {
imports : [ ] ,
providers : [ provideDesignAngularKit ( ) ] ,
} )
export class AppModule { } Both for the provideDesignAngularKit function and for the DesignAngularKitModule.forRoot() it is possible to use an initial configuration 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 ) Configure the styles requested in the styles.scss file. It matters the SCSS library as shown in the example below.
// Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;Bootstrap Italia inherits and extends all the default variables of Bootstrap, overwriting some values in the compilation phase and setting new to the occurs. An example of all is the $ primary color value that is represented by the blue #006CCC color in Bootstrap Italia, typical of the library.
The use of blue #0066cc should however be reserved for the central administrations of the state, and therefore you can find yourself in the condition of having to customize the values of the color variables of Bootstrap Italia, setting new values for your needs.
This color and other shades are generated starting from the HSB terna, therefore the primary-h variables must be changed, Primary-S and Primary-B. To have the correspondence between the hexadecimal value of color and hsb, the RGB.to portal can be used, for example https://rgb.to/0066cc.
Below is an example of styles.scss files with the customization of colors. The customizations of the variables must always be made before importing the bootstrap-italia.scss file
// 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 ' ; To add icon/assets support, change your angular.json adding:
{
"assets" : [
...
{
"glob" : " **/* " ,
"input" : " ./node_modules/bootstrap-italia/ " ,
"output" : " /bootstrap-italia/ "
}
]
}The US NGX-Translate bookshop to add the I18N localizations.
Modify your angular.json adding:
{
"assets" : [
...
{
"glob" : " **/* " ,
"input" : " ./node_modules/design-angular-kit/assets/i18n " ,
"output" : " /bootstrap-italia/i18n/ "
}
]
} You can use the localized labels of the design-angular-kit library in your application, for example {{'it.errors.required-field' | translate}} . See our labels
If you already use the location files in your app, you can use the NGX-Translate-Multi-Http-Loder bookshop to upload both the location files of the app and those of the design-angular-kit library
Using the provideDesignAngularKit function:
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 ] ,
} ) ,
} ) ; Using the DesignAngularKitModule module:
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 ] ,
} ) ,
} ) ; If you want to customize our labels:
angular.jsonassets/bootstrap-italia/i18n/ (Create the path if it doesn't exist) foldertranslateLoader to the initial configuration of the bookcase, replacing the assets/bootstrap-italia/i18n/ at the itPrefix attribute Using the DesignAngularKitModule module, all components of the library will be imported into the application.
Alternatively, since all our components and directives are standalone , you can only import the components/modules you need, e.g. Alert, Pagination and Broadcrumb.
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 { } ? It is possible to contribute to the library in various ways:
Would you like to help on design Angular kit? You are in the right place!
If you have not already done so, start by spending a few minutes to deepen your knowledge on the design guidelines for the PA web services, and refer to the indications on how to contribute to the Angular Kit design.
The minimum requirements of your local environment must be:
At this point, it is necessary to set your local environment for compilation of the source file and the generation of the documentation:
git clone https://github.com/italia/design-angular-kit.git
npm i
npm run start
npm run test
The minimum requirements of your local environment to work with Devcontainer must be:
Start Visual Studio Code and install Microsoft's Dev Containers extension (MS-Vscode-Remote.Remo-Concainers).
At this point, it is necessary to set follow the following steps:
git clone https://github.com/italia/design-angular-kit.git
Open the project folder with Visual Studio Code
At loading, Visual Studio Code will recognize the presents of the configuration of a devccontainer. Open the project with the Devcontainer. More info here.
Visual Studio Code will carry out the container setup, going to install the correct version of Nodejs, NPM and the Extensions of the idea. Project addictions will be installed in the process of creating the container. The Swiss environment will be ready for setup completed.
Launch the application locally
npm run start
npm run test
Special thanks to those who made the development of this library possible
 |  |  |
|---|---|---|
| Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
And thanks in particular to the NetService team:
All contributors ( made with contributioners-IMG )
