Materiale angolare - Widget

Angular Material fornisce una ricca libreria di widget dell'interfaccia utente. Ciò consente agli utenti di avere capacità di interazione avanzate con l'applicazione.

La tabella seguente elenca alcuni widget importanti con la loro descrizione:

Suor n Widget e descrizione
1 Bottoni

Il md-button, una direttiva angolare, è una direttiva sui pulsanti con increspature di inchiostro opzionali (e sono abilitate per impostazione predefinita). Sehref o ng-href viene fornito l'attributo, quindi questa direttiva funge da elemento di ancoraggio.

2 CheckBoxes

Il md-checkbox, una direttiva angolare, viene utilizzata come casella di controllo.

3 Soddisfare

Il md-content, una direttiva angolare, è un elemento contenitore e viene utilizzato per il contenuto scorrevole. Illayout-padding attributo può essere aggiunto per avere contenuto imbottito.

4 Date picker

Il md-datepicker, una direttiva angolare, è un controllo di input per selezionare una data. Supporta anche ngMessages per la convalida dell'input.

5 Dialoghi

Il md-dialog, una direttiva angolare, è un elemento contenitore e viene utilizzato per visualizzare una finestra di dialogo. Il suo elementomd-dialog-content contiene il contenuto della finestra di dialogo e il file md-dialog-actions è responsabile delle azioni di dialogo.

Il mdDialog, un servizio angolare, apre una finestra di dialogo sull'applicazione per tenere informati gli utenti e aiutarli a prendere decisioni.

6 Divisore

Il md-divider, una direttiva angolare, è un elemento regola e viene utilizzato per visualizzare una regola sottile e leggera per raggruppare e dividere i contenuti all'interno di elenchi e layout di pagina.

7 Elenco

Il md-list, una direttiva angolare, è un componente contenitore che contiene md-list-itemelementi da bambini. La direttiva md-list-item è un componente contenitore per gli elementi riga del contenitore md-list. Classi CSSmd-2-line e md-3-line può essere aggiunto a md-list-item per aumentare l'altezza della riga con 22px e 40px rispettivamente.

8 Menù

Il md-menu, una direttiva angolare, è un componente per visualizzare le opzioni di aggiunta nel contesto dell'azione eseguita. Ilmd-menuha due elementi figlio. Il primo elemento è il filetrigger elemente serve per aprire il menu. Il secondo elemento è ilmd-menu-contentper rappresentare il contenuto del menu all'apertura del menu. Il contenuto md-menu di solito porta le voci di menu come elemento-menu-md.

9 Barra dei menu

Il md-menu-bar, è un componente contenitore per contenere più menu. La barra dei menu aiuta a creare un effetto menu fornito dal sistema operativo.

10 Barre di avanzamento

Il md-progress-circular e md-progress-linear sono direttive di avanzamento angolari e vengono utilizzate per mostrare il messaggio di caricamento del contenuto nell'applicazione.

11 Tasti della radio

Il md-radio-group e md-radio-buttonLe direttive angolari vengono utilizzate per mostrare i pulsanti di opzione nell'applicazione. Il gruppo md-radio è il contenitore di raggruppamento per gli elementi del pulsante di opzione md.

12 Seleziona

Il md-select, viene utilizzata una direttiva angolare per mostrare la casella Seleziona, delimitata da ng-model.

13 Barre degli strumenti favolose

Il md-fab-toolbar, una direttiva Angular, viene utilizzata per mostrare una barra degli strumenti o pulsanti per l'accesso rapido alle azioni comuni.

14 Sliders

Il md-slider, viene utilizzata una direttiva angolare per mostrare un componente di intervallo. Ha due modalità:

  • normal- L'utente può scorrere tra un'ampia gamma di valori. Predefinito.

  • discrete- L'utente può scorrere tra i valori selezionati. Per abilitare la modalità discreta, utilizzare gli attributi md-discrete e step.

15 Tab

Il md-tabs e md-tabLe direttive angolari vengono utilizzate per mostrare le schede nell'applcation. md-tabs è il contenitore di raggruppamento per gli elementi md-tab.

16 Barre degli strumenti

Il md-toolbar, una direttiva angolare viene utilizzata per mostrare una barra degli strumenti che normalmente è un'area sopra il contenuto per mostrare il titolo ei relativi pulsanti.

17 Descrizioni comandi

Il materiale angolare fornisce vari metodi speciali per mostrare agli utenti suggerimenti non invadenti. Il materiale angolare fornisce modi per assegnare loro le direzioni e la direttiva md-tooltip viene utilizzata per mostrare i suggerimenti. Una descrizione comando si attiva ogni volta che l'utente si concentra, passa con il mouse o tocca il componente principale.

18 Patatine fritte

Il md-chips, una direttiva angolare, viene utilizzata come componente speciale chiamato Chip e può essere utilizzata per rappresentare un piccolo insieme di informazioni, ad esempio un contatto, tag, ecc. È possibile utilizzare un modello personalizzato per rendere il contenuto di un chip. Ciò può essere ottenuto specificando un elemento md-chip-template con contenuto personalizzato come figlio di md-chips.

19 Contatta Chips

Il md-contact-chips, una direttiva angolare, è un controllo di input basato su md-chip e utilizza l'estensione md-autocompleteelemento. Il componente del chip di contatto accetta un'espressione di query che restituisce un elenco di possibili contatti. Un utente può selezionare uno di questi e aggiungerlo all'elenco dei chip disponibili.