Perch\u00e9 Usare una Libreria di Componenti?<\/h2>\n
Potete crearli in autonomia o adottare librerie di terze parti. In entrambi i casi, i componenti costituiscono la base delle applicazioni Angular. Ogni componente si basa su un template per gli elementi HTML e CSS e sul codice TypeScript che ne controlla il comportamento.<\/p>\n
Il vantaggio principale delle librerie di componenti \u00e8 che forniscono elementi dell’interfaccia utente riutilizzabili e precostituiti, riducendo la necessit\u00e0 di codice personalizzato e aiutando chi sviluppa ad avviare rapidamente le applicazioni.<\/p>\n
L’approccio di Angular ai componenti pu\u00f2 anche migliorare la collaborazione tra i team di sviluppo che scrivono il codice TypeScript e i web designer che forniscono l’HTML per i template.<\/p>\n
Le librerie di componenti vengono generalmente aggiunte ai progetti Angular utilizzando Node.js Le librerie di componenti presenti nel nostro elenco sono state selezionate in base a diversi criteri:<\/p>\n Ora diamo un’occhiata pi\u00f9 da vicino alle nostre scelte.<\/p>\n Angular Material<\/a> \u00e8 la libreria di componenti ufficiale di Angular, che offre una raccolta completa di UI e si mantiene al passo con le ultime funzionalit\u00e0 di Angular e le modifiche alle API. Offre anche un supporto integrato per l’accessibilit\u00e0, generando markup per consentire la navigazione da tastiera e guidare le tecnologie assistive come gli screen reader.<\/p>\n Come funziona:<\/strong> Angular Material sfrutta le direttive e i servizi integrati di Angular per fornire un insieme di componenti performanti e legati ai dati in aggiunta ad Angular, rendendo pi\u00f9 semplice l’aggiunta di interattivit\u00e0 alle applicazioni web.<\/p>\n Dove eccelle:<\/strong> Angular Material eccelle nella fornitura di componenti UI precostituiti che seguono le linee guida del Material Design. Offre una serie di componenti UI ben progettati e personalizzabili che possono essere integrati facilmente nelle applicazioni Angular. Questi componenti includono menu di navigazione, pulsanti, moduli, finestre di dialogo e altro ancora.<\/p>\n Per esempio, se volete aggiungere un componente pulsante alla vostra applicazione, potete semplicemente usare la direttiva Ecco un esempio di codice:<\/p>\n Questo codice generer\u00e0 un componente pulsante con lo schema di colori primario. Potete personalizzare ulteriormente il pulsante aggiungendo gestori di eventi, modificando il testo e l’aspetto dell’icona.<\/p>\n NG-Bootstrap<\/a> \u00e8 una libreria open-source costruita sulla base di Bootstrap CSS, che fornisce componenti e pattern di design che molti professionisti dello sviluppo gi\u00e0 conoscono. Questo riduce la curva di apprendimento per i nuovi progetti, rendendola una scelta affidabile per realizzare applicazioni Angular in modo rapido ed efficiente.<\/p>\n Come funziona:<\/strong> NG-Bootstrap estende le funzionalit\u00e0 dei componenti Bootstrap consentendo a chi sviluppa di usarli come direttive Angular, con binding bidirezionale dei dati e altre funzionalit\u00e0 specifiche di Angular. In questo modo gli sviluppatori possono creare facilmente applicazioni web responsive e mobile-friendly che funzionano perfettamente con Angular.<\/p>\n Dove eccelle:<\/strong> Uno dei principali punti di forza di NG-Bootstrap \u00e8 il supporto alle funzioni di accessibilit\u00e0, comprese le specifiche W3C per le Accessible Rich Internet Applications (ARIA), che rendono pi\u00f9 facile per gli sviluppatori creare applicazioni utilizzabili dalle persone con disabilit\u00e0. NG-Bootstrap eccelle anche nel campo delle finestre di dialogo modali. Con il componente Ecco un esempio di come creare una finestra di dialogo modale di base utilizzando NG-Bootstrap:<\/p>\n In questo esempio, l’elemento Clarity<\/a> \u00e8 una libreria open-source che usa un linguaggio visivo condiviso tra i suoi componenti per fornire un’interfaccia utente coerente e intuitiva. Inoltre \u00e8 ampiamente documentata, con numerose guide, tutorial e riferimenti alle API, che la rendono facile da imparare e da usare.<\/p>\n Come funziona:<\/strong> Il sistema di progettazione di Clarity si basa sul concetto di “schede”, che vengono utilizzate per raggruppare contenuti correlati. Le schede si usano per rappresentare singoli contenuti in modo strutturato e organizzato. Clarity offre una serie di componenti di schede che possono presentare i dati in diversi formati. Questi componenti includono header, footer e sezioni di contenuto e possono essere facilmente personalizzati con stili e temi diversi.<\/p>\n Le schede possono anche essere combinate con altri componenti, come modali, dropdown e pulsanti, per creare design UI pi\u00f9 complessi. L’obiettivo generale del design basato sulle schede \u00e8 quello di fornire un sistema flessibile e modulare per creare interfacce complesse con facilit\u00e0.<\/p>\n Dove eccelle:<\/strong> L’ampio set di controlli dei moduli di Clarity \u00e8 un punto di forza. Questi controlli includono campi di input, caselle di selezione, pulsanti di opzione e altro ancora. Clarity offre anche una serie di visualizzazioni di dati, come grafici a barre, grafici a linee e grafici a torta, che aiutano a visualizzare i dati in modo chiaro e organizzato.<\/p>\n Ecco un esempio di utilizzo del componente campo di input di Clarity in un modulo HTML:<\/p>\n Questo codice creer\u00e0 un campo di input per un modulo con un’etichetta e un testo segnaposto. Le direttive Kendo UI<\/a> \u00e8 una libreria commerciale costruita tenendo conto delle prestazioni, garantendo tempi di caricamento rapidi e un’esperienza utente fluida. Offre inoltre temi e opzioni di stile per migliorare l’aspetto della vostra applicazione, oltre a un’ampia documentazione e a un team di supporto dedicato.<\/p>\n Come funziona:<\/strong> Kendo UI usa tecniche come la virtualizzazione e il lazy loading per garantire tempi di caricamento rapidi e un’esperienza utente fluida. Ci\u00f2 significa che le applicazioni realizzate con Kendo UI sono veloci e responsive, anche quando si tratta di grandi insiemi di dati. Kendo UI segue inoltre un’architettura modulare che vi consente di usare solo i componenti necessari, riducendo le dimensioni della libreria e migliorando le prestazioni.<\/p>\n Dove eccelle:<\/strong> Kendo UI \u00e8 particolarmente adatto alle applicazioni di livello aziendale che richiedono un’ampia gestione dei dati e complesse interazioni con gli utenti. Il suo componente griglia, per esempio, supporta funzioni come il filtraggio, l’ordinamento e il raggruppamento, consentendo a chi sviluppa di presentare agli utenti grandi insiemi di dati in modo gestibile.<\/p>\n Ecco uno snippet di codice su come creare una semplice griglia Kendo UI in HTML:<\/p>\n Questo codice visualizzer\u00e0 una griglia Kendo UI nella vostra applicazione Angular. Potete personalizzare la griglia passando varie opzioni di configurazione al componente PrimeNG<\/a> \u00e8 una libreria open-source progettata per essere facile da usare e da personalizzare. Include anche funzioni avanzate di accessibilit\u00e0 e supporto all’internazionalizzazione, che la rendono un’ottima scelta per le applicazioni globali.<\/p>\n Come funziona:<\/strong> La libreria PrimeNG fornisce una serie di componenti UI precostituiti che potete integrare facilmente nelle loro applicazioni Angular. Usa le direttive e gli hook del ciclo di vita di Angular per garantire una perfetta integrazione con il framework. Inoltre, supporta diverse opzioni di configurazione e personalizzazione, in modo che gli sviluppatori possano adattare i componenti alle loro esigenze specifiche.<\/p>\n Dove eccelle:<\/strong> Una delle caratteristiche principali di PrimeNG \u00e8 il supporto all’internazionalizzazione. La libreria supporta diverse lingue e fornisce servizi di traduzione per la maggior parte dei suoi componenti. Ci\u00f2 \u00e8 possibile grazie all’utilizzo del framework di localizzazione di Angular e dei file di messaggio, che possono essere facilmente personalizzati e aggiornati.<\/p>\n Per usare l’internazionalizzazione in PrimeNG, dovete creare dei file di traduzione per le lingue che volete supportare. Questi file devono contenere le traduzioni di tutti i componenti che volete usare nella vostra applicazione. Per abilitare l’internazionalizzazione in PrimeNG, dovete impostare l’attributo Ecco un esempio di utilizzo del componente In questo esempio, il componente Nebular<\/a> \u00e8 una raccolta di oltre 40 componenti Angular UI disponibili in quattro temi personalizzabili. La libreria, creata dalla societ\u00e0 di sviluppo web Akveo, \u00e8 dotata anche di un modulo di autenticazione utente e di un modulo di sicurezza basato su ACL per controllare l’accesso pi\u00f9 granulare a risorse specifiche. Akveo pu\u00f2 anche aiutarvi a a creare la vostra applicazione di bacheca di amministrazione con il kit ngx-admin<\/strong> costruito grazie ai moduli Nebular.<\/p>\n Come funziona:<\/strong> L’approccio UI di Nebular si basa sulle specifiche del sistema di progettazione Eva<\/a> di Akveo, per il quale fornisce anche risorse per i team il cui lavoro inizia con strumenti di progettazione come Sketch o Figma.<\/p>\n Se siete designer e lavorate con il CSS di Nebular potete generalmente fare riferimento alle opzioni di stile in modo semantico, come le variabili di colore La libreria di componenti di Nebular include layout, schede, elenchi, fisarmoniche, aiuti alla navigazione, elementi di moduli, tabelle di dati, modali e overlay, oltre a widget come spinner, selezionatori di date e barre di avanzamento.<\/p>\n I metadati di un componente accordion di Nebular potrebbero assomigliare a questo TypeScript:<\/p>\n E il suo template potrebbe essere simile a questo:<\/p>\n Dove eccelle:<\/strong> La libreria Nebular e il kit per la bacheca di amministrazione ngx-admin<\/strong> sono gratuiti, quindi \u00e8 un grande vantaggio per una collezione di strumenti cos\u00ec sofisticati. I moduli di autenticazione e sicurezza riflettono l’attenzione di Akveo per questi componenti del pannello di amministrazione.<\/p>\n Nebular ha anche un forte supporto per le lingue che leggono da destra a sinistra (RTL). Gli utenti troveranno il markup CSS per supportare i layout RTL (e LTR) e metodi – come NG-Lightning<\/a> \u00e8 un’interessante aggiunta alle librerie di componenti, essendo un’implementazione in stile Angular del Salesforce Lightning Design System<\/a> (LDS). Questo sistema fornisce elementi HTML, CSS – blueprint – e linee guida di progettazione per chi sviluppa con Salesforce e usa il framework Lightning della piattaforma. Gli elementi chiave di LDS si riflettono in questa raccolta open-source di widget Angular, compresi l’HTML e il CSS.<\/p>\n Come funziona:<\/strong> NG-Lightning ha delle dipendenze che la differenziano da altre librerie di componenti. Oltre a dipendere dall’Angular Component Dev Kit<\/a> ufficiale, le applicazioni NG-Lightning si collegano agli stessi repository CSS utilizzati da Salesforce LDS. I CSS possono essere scaricati dal repository ufficiale di Salesforce UX<\/a> o collegati tramite un CDN.<\/p>\n Tuttavia, l’approccio alla costruzione delle viste basato su TypeScript vi risulter\u00e0 familiare se sviluppate con Angular. In questo esempio si possono creare i metadati per il componente di avviso mostrato sopra:<\/p>\n Il template del componente per l’esempio ufficiale di NG-Lightning \u00e8:<\/p>\n Dove eccelle:<\/strong> Considerate le loro basi nell’LDS di Salesforce, il team di sviluppo di NG-Lightning prende sul serio il tema dell’accessibilit\u00e0 web. Le interfacce generate dinamicamente, che sono il segno distintivo di framework come Angular, possono spesso risultare ostiche per gli utenti finali con disabilit\u00e0 visive o motorie. NG-Lightning aderisce alle linee guida del W3C sulle specifiche ARIA, generando un markup web progettato per supportare tecnologie assistive come gli screen reader.<\/p>\n Syncfusion UI<\/a> \u00e8 una libreria leggera e modulare che permette a chi sviluppa di scegliere solo i componenti necessari per la loro applicazione e di ridurre le dimensioni complessive del pacchetto finale. In questo modo \u00e8 facile mantenere, estendere e aggiornare la libreria aggiungendo nuovi componenti o modificando quelli esistenti senza influenzare gli altri.<\/p>\n Come funziona:<\/strong> Quando si carica una pagina, la libreria Syncfusion UI inizializza e crea i componenti necessari in base al markup e alle opzioni di configurazione. Per esempio, il componente griglia permette agli utenti di ordinare, filtrare e raggruppare i dati, mentre il componente grafico pu\u00f2 visualizzare i dati in diversi formati, tra cui grafici a linee, a barre e a torta.<\/p>\n La libreria include anche una serie di funzioni e strumenti di utilit\u00e0 che si possono usare per semplificare le attivit\u00e0 pi\u00f9 comuni, come la manipolazione e la convalida dei dati. La libreria include un gestore di dati che pu\u00f2 essere utilizzato per lavorare con strutture di dati complesse e un motore di validazione che pu\u00f2 essere utilizzato per convalidare gli input dell’utente.<\/p>\n Dove eccelle:<\/strong> Syncfusion offre un robusto set di strumenti per la personalizzazione e la tematizzazione, consentendovi di creare rapidamente un’interfaccia utente coerente e dall’aspetto professionale. La libreria include un potente set di API ed eventi che si possono usare per creare funzionalit\u00e0 e interattivit\u00e0 personalizzate, oltre al supporto per le pi\u00f9 diffuse fonti di dati come API REST, OData e SignalR.<\/p>\n Ecco un esempio di inclusione di un componente griglia di Syncfusion in un’applicazione Angular:<\/p>\n Questo codice crea una semplice griglia che visualizza i dati di una fonte di dati. La propriet\u00e0 Onsen UI<\/a> \u00e8 una popolare libreria UI open-source per la creazione di applicazioni mobili ibride e web. Offre una migliore integrazione con i framework frontend<\/a> pi\u00f9 diffusi rispetto ad altre librerie di terze parti, facilitando la creazione di interfacce utente interattive e di alta qualit\u00e0 con il minimo sforzo.<\/p>\n Come funziona:<\/strong> Onsen UI si basa sulla filosofia Material Design di Google, che garantisce che l’interfaccia utente dell’applicazione sia esteticamente piacevole e di facile utilizzo. Fornisce un’ampia serie di temi integrati che possono essere applicati ai componenti per migliorare l’aspetto dell’applicazione.<\/p>\n Dove eccelle:<\/strong> Onsen UI eccelle per la sua facilit\u00e0 d’uso e per la capacit\u00e0 di creare applicazioni multipiattaforma che hanno lo stesso aspetto delle applicazioni native. Offre un ricco set di componenti UI pre-progettati, ottimizzati per i dispositivi mobili e personalizzabili in base alle esigenze dell’applicazione. Include anche funzioni come il supporto FastClick<\/a>, che aiuta a eliminare i ritardi negli eventi touch, e il lazy loading, che permette di velocizzare i tempi di caricamento dell’applicazione.<\/p>\n Ecco un esempio di codice che mostra come creare un semplice pulsante con Onsen UI:<\/p>\n Questo codice creer\u00e0 un pulsante con il testo “Click me!” e la classe di modificatori Le librerie di componenti sono ormai ampiamente accettate come pratica standard nello sviluppo web. Le librerie di componenti hanno aiutato Angular a diventare uno dei framework di sviluppo frontend pi\u00f9 popolari e utilizzati, perch\u00e9 offre un modo conveniente ed efficiente per sviluppare componenti UI.<\/p>\n Le librerie di cui sopra forniscono componenti UI predefiniti e personalizzabili che aiutano i team di sviluppo a creare interfacce utente coerenti e di alta qualit\u00e0 con meno sforzo. In definitiva, la scelta della libreria dipende dalle esigenze specifiche del progetto e dalle preferenze di chi lo sviluppa.<\/p>\n Avete bisogno di una casa per il vostro prossimo progetto Angular? Le piattaforme di hosting di applicazioni<\/a> e di hosting di database<\/a> di Kinsta sono soluzioni che vi aiutano a lanciare la vostra applicazione nel mondo.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular \u00e8 un framework JavaScript open-source realizzato con TypeScript e ottimizzato per lo sviluppo di applicazioni web a pagina singola. \u00c8 noto per la sua versatilit\u00e0, …<\/p>\n","protected":false},"author":117,"featured_media":67243,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26214],"class_list":["post-67242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> Node Package Manager o l’interfaccia a riga di comando (CLI) di Angular.<\/p>\nQuali Sono gli Elementi di una Buona Libreria di Componenti?<\/h2>\n
\n
9 Librerie di Componenti Angular<\/h2>\n
1. Angular Material<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
mat-button<\/code> e personalizzarlo secondo le vostre esigenze.<\/p>\n<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"Esempio](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code> Modal, potete creare facilmente finestre di dialogo modali con opzioni personalizzabili come dimensioni, sfondo e supporto per la tastiera.<\/p>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n\t<h4 class=\"modal-title\">Modal title<\/h4>\n\t<button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n \t<span aria-hidden=\"true\">×<\/span>\n\t<\/button>\n <\/div>\n <div class=\"modal-body\">\n\t<p>Modal body text goes here.<\/p>\n <\/div>\n <div class=\"modal-footer\">\n\t<button type=\"button\" class=\"btn btn-secondary\" (click)=\"modal.close('Close click')\">Close<\/button>\n <\/div>\n<\/ng-template>\n<button class=\"btn btn-primary\" (click)=\"open(content)\">Launch demo modal<\/button><\/code><\/pre>\nng-template<\/code> contiene il contenuto della finestra di dialogo modale, compresi l\u2019header, il body e il footer. L’elemento button alla fine del frammento di codice attiva l’apertura della finestra modale quando viene cliccato. Il metodo open()<\/code> viene utilizzato per visualizzare la finestra modale e prende come argomento l’elemento ng-template<\/code>.<\/p>\n3. Clarity<\/h3>\n
![\"Illustrazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-clarity.png\")
<clr-input-container>\n <label>Username<\/label>\n <input clrInput placeholder=\"Enter your username\">\n<\/clr-input-container><\/code><\/pre>\nclr-input-container<\/code> e clrInput<\/code> sono fornite dalla libreria di Clarity e daranno al campo di input uno stile appropriato.<\/p>\n4. Kendo UI<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-kendo-ui-data-grid.png\")
<kendo-grid [data]=\"gridData\">\n\t<kendo-grid-column field=\"ProductID\" title=\"Product ID\" width=\"120\"><\/kendo-grid-column>\n\t<kendo-grid-column field=\"ProductName\" title=\"Product Name\" width=\"200\"><\/kendo-grid-column>\n\t<kendo-grid-column field=\"UnitPrice\" title=\"Unit Price\" width=\"120\"><\/kendo-grid-column>\n\t<kendo-grid-column field=\"UnitsInStock\" title=\"Units In Stock\" width=\"120\"><\/kendo-grid-column>\n<\/kendo-grid><\/code><\/pre>\nkendo-grid<\/code>.<\/p>\n5. PrimeNG<\/h3>\n
![\"Logo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> di un componente su true<\/code>. Il componente utilizzer\u00e0 quindi i file di traduzione per visualizzare il testo nella lingua scelta dall’utente.<\/p>\np-calendar<\/code> con supporto all’internazionalizzazione in PrimeNG:<\/p>\n<p-calendar [(ngModel)]=\"date\" [showIcon]=\"true\" [readonlyInput]=\"true\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"2000:2030\" [locale]=\"en\"><\/p-calendar><\/code><\/pre>\np-calendar<\/code> ha l’attributo translate<\/code> impostato su true<\/code> e l’attributo [locale]<\/code> \u00e8 impostato sul codice della lingua inglese (en). In questo modo il calendario viene visualizzato in inglese per gli utenti che hanno scelto quella lingua.<\/p>\n6. Nebular<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code> e danger<\/code>. Ma gli utenti possono andare oltre ci\u00f2 che Akveo ha deciso di rappresentare importando le personalizzazioni avanzate dello stile come file Sass.<\/p>\nimport { Component, ChangeDetectionStrategy } from '@angular\/core';\n\n@Component({\n selector: 'nb-accordion-demo',\n templateUrl: '.\/accordion-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionDemoComponent {}<\/code><\/pre>\n<nb-accordion>\n <nb-accordion-item>\n\t<nb-accordion-item-header>First Item Heading<\/nb-accordion-item-header>\n\t<nb-accordion-item-body>\n \tToggled content for First Item.\n \t<\/nb-accordion-item-body>\n <\/nb-accordion-item>\n <nb-accordion-item>\n\t<nb-accordion-item-header>Second Item Heading<\/nb-accordion-item-header>\n\t<nb-accordion-item-body>\n \tToggled content for Second Item.\n\t<\/nb-accordion-item-body>\n <\/nb-accordion-item>\n<\/nb-accordion><\/code><\/pre>\ngetDirection()<\/code> e setDirection()<\/code> – per rilevare e modificare la direzione del layout in fase di esecuzione.<\/p>\n7. NG-Lightning<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-lightning-alert.png\")
import { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-demo-alert-basic',\n templateUrl: '.\/basic.html',\n})\nexport class DemoAlertBasic {\n showTopAlert = false;\n\n onClose(reason: string) {\n\tconsole.log(`Closed by ${reason}`);\n }\n}<\/code><\/pre>\n<div class=\"slds-notify_container\">\n <ngl-alert *ngIf=\"showTopAlert\" variant=\"warning\" iconName=\"warning\" (close)=\"onClose($event); showTopAlert = false;\">\n\t<h2 class=\"slds-text-heading_small\">\n \tYour browser is outdated. Your Salesforce experience may be degraded.\n \t<a href=\"javascript:void(0);\">More Information<\/a>\n\t<\/h2>\n <\/ngl-alert>\n<\/div>\n\n<ngl-alert class=\"slds-theme_alert-texture\" variant=\"offline\" iconName=\"offline\" (close)=\"onClose('click')\">\n <h2>You are in offline mode.<a href=\"javascript:void(0);\">More Information<\/a><\/h2>\n<\/ngl-alert>\n\n<ngl-alert class=\"slds-m-top_small\" variant=\"error\">Your browser is currently not supported.<\/ngl-alert>\n\n<button class=\"slds-m-top_medium\" type=\"button\" [disabled]=\"showTopAlert\" nglButton (click)=\"showTopAlert = true\">Show alert in container<\/button><\/code><\/pre>\n8. Syncfusion UI<\/h3>\n
![\"Esempi](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-syncfusion-cards.png\")
<ejs-grid [dataSource]=\"data\">\n\t<e-columns>\n \t<e-column field=\"OrderID\" headerText=\"Order ID\" textAlign=\"Right\" \twidth=\"120\"><\/e-column>\n \t<e-column field=\"CustomerID\" headerText=\"Customer Name\" width=\"150\"><\/e-column>\n \t<e-column field=\"Freight\" headerText=\"Freight\" textAlign=\"Right\" format=\"C2\" width=\"120\"><\/e-column>\n \t<e-column field=\"ShipCity\" headerText=\"Ship City\" width=\"150\"><\/e-column>\n\t<\/e-columns>\n<\/ejs-grid><\/code><\/pre>\ndataSource<\/code> \u00e8 impostata sui dati da visualizzare e l’elemento e-columns<\/code> \u00e8 utilizzato per definire le colonne della griglia. Ogni elemento e-column<\/code> definisce una colonna della griglia, includendo il campo da visualizzare, il testo dell’intestazione e la larghezza della colonna. L’esempio mostra anche come formattare i dati visualizzati nella griglia utilizzando l’attributo format<\/code>.<\/p>\n9. Onsen UI<\/h3>\n
![\"Esempi](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-onsen-ui-lists.png\")
<ons-button modifier=\"large--cta\">Click me!<\/ons-button><\/code><\/pre>\nlarge--cta<\/code>, che cambier\u00e0 l’aspetto del pulsante in una dimensione pi\u00f9 grande e con un colore adatto a un pulsante di chiamata all’azione.<\/p>\n\nRiepilogo<\/h2>\n