Design Angular Kit è un toolkit basato su Bootstrap Italia
per la creazione di applicazioni web sviluppate con Angular.
italia.github.io/design-angular-kit
Read this in other languages: English 🇬🇧.
⚠️ Se si necessita della vecchia versione il codice e la sua documentazione possono essere reperiti qua.
Commenti e contributi di tutta la community sono più che benvenuti! 🎉
Design Angular kit è un set di componenti Angular che implementa Bootstrap Italia e gli stili presenti su Design UI Kit.
La versione pubblica della documentazione della libreria è disponibile qui per l'ultima release stabile pubblicata, mentre qui per la versione di sviluppo relativa al branch main
.
Per giocare con la libreria è disponibile il Playground Angular Kit.
Design Angular Kit è disponibile su NPM, per installarlo su una applicazione esistente sulla quale provare la libreria esegui il comando
npm install design-angular-kit --save
Scegli la versione corrispondente alla tua versione Angular:
Angular | design-angular-kit |
---|---|
18+ | v1.1.0 + |
17+ | v1.0.0 + |
La libreria design-angular-kit
può essere utilizzata con i componenti standalone o con l'applicazione che utilizza i moduli. Segui la sezione di
configurazione che corrisponde alla tua applicazione.
Utilizza la funzione provideDesignAngularKit
nella configurazione dell'applicazione ApplicationConfig
per
poter inizializzare le funzionalità della libreria.
import { provideDesignAngularKit } from 'design-angular-kit';
export const appConfig: ApplicationConfig = {
providers: [
...
provideDesignAngularKit(),
]
}
È necessario importare DesignAngularKitModule
all'interno del modulo principale dell'applicazione (solitamente denominato AppModule)
utilizzando il metodo forRoot
per poter inizializzare le funzionalità della libreria e importare tutti i componenti.
import { DesignAngularKitModule } from 'design-angular-kit';
@NgModule({
imports: [
...
DesignAngularKitModule.forRoot()
]
})
export class AppModule { }
Utilizza il metodo forChild
durante l'importazione del modulo DesignAngularKitModule
in altri moduli dell'applicazione per importare tutti i componenti della libreria.
import { DesignAngularKitModule } from 'design-angular-kit';
@NgModule({
imports: [
...
DesignAngularKitModule.forChild()
],
exports: [DesignAngularKitModule],
})
export class SharedModule { }
Se nella tua applicazione è presente il modulo AppModule ma vuoi utilizzare i nostri componenti con la configurazione standalone,
utilizza la funzione provideDesignAngularKit
all'interno del modulo principale dell'applicazione per poter inizializzare le funzionalità della libreria.
import { provideDesignAngularKit } from 'design-angular-kit';
@NgModule({
imports: [],
providers: [
provideDesignAngularKit(),
]
})
export class AppModule { }
Sia per la funzione provideDesignAngularKit
che per il modulo DesignAngularKitModule.forRoot()
è possibile utilizzare una configurazione iniziale 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)
Configura gli stili richiesti nel file styles.scss
. Importa la libreria SCSS come mostrato nell'esempio qui sotto.
// Importazione libreria SCSS di bootstrap-italia
@import "bootstrap-italia/src/scss/bootstrap-italia";
Per aggiungere il supporto icone/assets, modifica il tuo angular.json
aggiungendo:
{
"assets": [
...
{
"glob": "**/*",
"input": "./node_modules/bootstrap-italia/",
"output": "/bootstrap-italia/"
}
]
}
La libreria usa ngx-translate per aggiungere le localizazioni i18n.
Modifica il tuo angular.json
aggiungendo:
{
"assets": [
...
{
"glob": "**/*",
"input": "./node_modules/design-angular-kit/assets/i18n",
"output": "/bootstrap-italia/i18n/"
}
]
}
Puoi utilizzare le label localizzate della libreria design-angular-kit
nella tua applicazione, ad esempio {{'it.errors.required-field' | translate}}
. Vedi le nostre label
Se utilizzi già i file di localizzazione nella tua app, puoi utilizzare la libreria ngx-translate-multi-http-loader
per caricare sia i file di localizzazione dell'app che quelli della libreria design-angular-kit
Utilizzando la funzione 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]
}),
})
Utilizzando il modulo 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]
}),
})
Se vuoi personalizzare le nostre label:
angular.json
assets/bootstrap-italia/i18n/
(crea il percorso se non esiste)translateLoader
custom, sostituendo la stringa assets/bootstrap-italia/i18n/
all'attributo itPrefix
Utilizzando il modulo DesignAngularKitModule
tutti i componenti della libreria verranno importati nell'applicazione.
In alternativa, poiché tutti i nostri componenti e direttive sono standalone, puoi importare solo i componenti/moduli di cui hai bisogno, ad es. Alert, Paginazione e Breadcrumb.
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 {
}
👉🏻 È possibile contribuire alla libreria in vari modi:
Vorresti dare una mano su Design Angular Kit? Sei nel posto giusto!
Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle linee guida di design per i servizi web della PA, e fai riferimento alle indicazioni su come contribuire a Design Angular Kit.
I requisiti minimi del tuo ambiente locale devono essere:
A questo punto, è necessario impostare il tuo ambiente locale per la compilazione dei file sorgente e la generazione della documentazione:
git clone https://github.com/italia/design-angular-kit.git
npm i
npm run start
npm run test
I requisiti minimi del tuo ambiente locale per lavorare con i Devcontainer devono essere:
Avvia Visual Studio Code e installa l'estensione Dev Containers di Microsoft (ms-vscode-remote.remote-containers).
A questo punto, è necessario impostare seguire i seguenti step:
git clone https://github.com/italia/design-angular-kit.git
Aprire la cartella di progetto con Visual Studio Code
Al caricamento, Visual Studio Code riconoscerà la presenta della configurazione di un Devcontainer. Aprire il progetto con il devcontainer. Altre info qui.
Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato.
Lanciare l'applicazione in locale
npm run start
npm run test
Un grazie speciale a chi ha reso possibile lo sviluppo di questa libreria
![]() |
![]() |
![]() |
---|---|---|
Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
e grazie in particolare al team di NetService:
Tutti i contributor (made with contributors-img)