design-angular-kit
Advanced tools
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
Design Angular Kit è un toolkit basato su Bootstrap Italia
per la creazione di applicazioni web sviluppate con Angular.
italia.github.io/design-angular-kit
⚠️ Attenzione: questo codice è ancora in fase di sviluppo e non è pronto per essere utilizzato! Stiamo lavorando all'aggiornamento per portare il kit alla versione 1.0.0, commenti e contributi di tutta la community sono più che benvenuti! Se si necessita della vecchia versione il codice e la sua documentazione possono essere reperiti qua.
Sono partite le lavorazioni per l'aggiornamento del kit Angular a Bootstrap Italia 2 (basato su Bootstrap 5).
Sul branch main potete trovare il codice dei lavori in corso e nella milestone Version 1.0.0 un piano preliminare delle attività. La vecchia versione è da considerarsi deprecata.
👉🏻 È possibile contribuire a questa nuova versione in vari modi:
Commenti e contributi di tutta la community sono più che benvenuti! 🎉
Design Angular Kit è disponibile su NPM, per installarlo su una applicazione esistente sulla quale provare la libreria (attualmente non stabile) esegui il comando
npm install design-angular-kit@prerelease --save
Scegli la versione corrispondente alla tua versione Angular:
| Angular | design-angular-kit |
|---|---|
| 17+ | v1.0.0-prerelease.2 + |
| 16+ | v1.0.0-17 + |
| 15+ | v1.0.0-2 + |
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 { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideDesignAngularKit } from 'design-angular-kit';
export const appConfig: ApplicationConfig = {
providers: [
...
provideAnimations(), // Necessario per il funzionamento della libreria
provideHttpClient(), // Necessario per il funzionamento della libreria
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 { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DesignAngularKitModule } from 'design-angular-kit';
@NgModule({
imports: [
...
HttpClientModule, // Necessario per il funzionamento della libreria
BrowserAnimationsModule, // Necessario per il funzionamento della libreria
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 { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { provideDesignAngularKit } from 'design-angular-kit';
@NgModule({
imports: [
...
HttpClientModule, // Necessario per il funzionamento della libreria
BrowserAnimationsModule, // Necessario per il funzionamento della libreria
],
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";
Bootstrap Italia eredita ed estende tutte le variabili di default di Bootstrap, sovrascrivendo alcuni valori in fase di compilazione e impostandone di nuovi all’occorenza. Un esempio fra tutti è il valore del colore $primary che in Bootstrap Italia è rappresentato dal colore blu #0066CC, tipico della libreria.
L’utilizzo del blu #0066CC dovrebbe però essere riservato alle amministrazioni centrali dello Stato, e quindi ci si può trovare nella condizione di dover personalizzare i valori delle variabili colore di Bootstrap Italia, impostando nuovi valori per le proprie necessità.
Questo colore e le altre tonalità vengono generate a partire dalla terna HSB, pertanto occorre modificare le variabili primary-h, primary-s e primary-b. Per avere la corrispondenza tra valore esadecimale del colore e HSB si può utilizzare il portale rgb.to, ad esempio https://rgb.to/0066CC.
Di seguito un esempio di file styles.scss con la personalizzazione dei colori.
Le personalizzazioni delle variabili devono sempre essere effettuate prima dell'importazione del file 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';
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 itPrefixUtilizzando 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 {
}
Vuoi segnalare un bug o fare una richiesta?
Prima di tutto assicurati che sia un problema relativo al tema Design Angular Kit e non alla libreria Bootstrap Italia da cui deriva (in tal caso puoi fare riferimento al repository di Bootstrap Italia), poi dai un'occhiata a come creare una issue.
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.
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
Un grazie speciale a chi ha reso possibile lo sviluppo di questa nuova versione!
 |  |  |  |
|---|---|---|---|
| Cristian Borelli | Antonino Bonanno | NetService | Alessio Napolitano |
Tutti i contributor (made with contributors-img)
FAQs
Un toolkit Angular conforme alle linee guida di design per i servizi web della PA
We found that design-angular-kit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.