Grazie a librerie come Bootstrap, SemanticUI, Material e altre ancora, è diventato molto più semplice, rispetto al passato, creare interfacce grafiche coerenti a livello di stile, dimensioni del testo, spaziature e molto altro ancora. Queste librerie introducono una serie di classi CSS da utilizzare nel nostro codice per stilizzare gli elementi e spesso, per stilizzare un singolo elemento, dobbiamo assegnare più di una classe.
Per fare un esempio, per stilizzare un bottone piccolo in Bootstrap, dobbiamo assegnare all'oggetto button le seguenti classi: btn per dare gli stili di base di un bottone, btn-primary per specificare lo stile del bottone principale e btn-sm per assegnare gli stili che riducono le dimensioni del bottone. Sebbene assegnare queste classi sia estremamente semplice, è altrettanto semplice sbagliare a scrivere o dimenticare una classe. Inoltre, se ad un certo punto decidiamo di cambiare gli stili, dobbiamo ripassare in tutte le pagine o affidarci a dei replace.
In Angular possiamo limitare il problema creando una direttiva che imposta questi stili per noi.
@Directive({ selector: 'button[myButton]' }) export class ButtonDirective implements AfterViewInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} ngAfterViewInit() { this.renderer.addClass(this.elementRef.nativeElement, 'btn btn-primary btn-sm'); } }
Questa direttiva si applica a tutti i tag button con l'attributo myButton. Non appena la view viene inizializzata, questa direttiva recupera il pulsante a cui è associata e gli aggiunge le classi CSS di bootstrap. Se decidessimo di cambiare le classi da applicare ai pulsanti, ci basterebbe modificare questa direttiva e automaticamente lamodifica verrebbe applicata a tutti i pulsanti con la direttiva.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare gruppi di client per Event Grid MQTT
Usare il versioning con i controller di ASP.NET Core Web API
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Aggiungere interattività lato server in Blazor 8
Le novità di Angular: i miglioramenti alla CLI
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Reactive form tipizzati con FormBuilder in Angular
Verificare la provenienza di un commit tramite le GitHub Actions
Implementare il throttling in ASP.NET Core
Eseguire query verso tipi non mappati in Entity Framework Core
Disabilitare automaticamente un workflow di GitHub
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser