Materiale angolare - Guida rapida
Angular Material è una libreria di componenti dell'interfaccia utente per gli sviluppatori di Angular JS. I componenti dell'interfaccia utente riutilizzabili di Angular Material aiutano a costruire pagine Web e applicazioni Web attraenti, coerenti e funzionali, rispettando i moderni principi di progettazione Web come la portabilità del browser, l'indipendenza dal dispositivo e il degrado gradevole.
Di seguito sono riportate alcune caratteristiche salienti di Angular Material:
Progettazione reattiva integrata.
CSS standard con ingombro minimo.
Include nuove versioni dei controlli comuni dell'interfaccia utente come pulsanti, caselle di controllo e campi di testo adattati per seguire i concetti di Material Design.
Include funzionalità avanzate e specializzate come schede, barra degli strumenti, composizione rapida, navigazione laterale, scorrimento e così via.
Cross-browser e può essere utilizzato per creare componenti Web riutilizzabili.
Design reattivo
Angular Material ha una progettazione reattiva incorporata in modo che il sito Web creato utilizzando Angular Material si riprogetti in base alle dimensioni del dispositivo.
Le classi di materiale angolare vengono create in modo tale che il sito Web possa adattarsi a qualsiasi dimensione dello schermo.
I siti Web creati utilizzando Angular Material sono completamente compatibili con PC, tablet e dispositivi mobili.
Estensibile
Il materiale angolare è dal design molto minimale e piatto.
È stato progettato considerando il fatto che è molto più facile aggiungere nuove regole CSS che sovrascrivere le regole CSS esistenti.
Supporta ombre e colori audaci.
I colori e le sfumature rimangono uniformi su varie piattaforme e dispositivi.
E, soprattutto, Angular Material è assolutamente gratuito.
Come utilizzare il materiale angolare?
Esistono due modi per utilizzare il materiale angolare:
Local Installation - Puoi scaricare le librerie di materiali angolari utilizzando npm, jspm o bower sulla tua macchina locale e includerle nel codice HTML.
CDN Based Version - Puoi includere i file angular-material.min.css e angular-material js nel tuo codice HTML direttamente dalla Content Delivery Network (CDN).
Installazione locale
Prima di utilizzare il seguente comando npm, è necessaria l'installazione di NodeJS sul nostro sistema. Per ottenere informazioni sul nodo JS, fare clic qui e aprire l'interfaccia della riga di comando di NodeJS. Useremo il seguente comando per installare le librerie di materiali angolari.
npm install angular-materialIl comando precedente genererà il seguente output:
[email protected] node_modules\angular-animate
[email protected] node_modules\angular-aria
[email protected] node_modules\angular-messages
[email protected] node_modules\angular
[email protected] node_modules\angular-materialnpm scaricherà i file sotto node_modules > angular-materialcartella. Includere i file come spiegato nel seguente esempio:
Esempio
Ora puoi includere il file css e js nel tuo file HTML come segue:
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
presenting content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as
Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>Il programma sopra genererà il seguente risultato:
Versione basata su CDN
Puoi includere il file angular-material.css e angular-material.jsfile nel codice HTML direttamente dalla Content Delivery Network (CDN). Google CDN fornisce contenuti per l'ultima versione.
Stiamo utilizzando la versione CDN di Google della libreria in questo tutorial.
Esempio
Ora riscriviamo l'esempio sopra usando angular-material.min.css e angular-material.min.js da Google CDN.
<html lang = "en" >
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type = "text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
ypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>Il programma sopra genererà il seguente risultato:
Il md-autocomplete, una direttiva angolare, viene utilizzata come controllo di input speciale con un menu a discesa integrato per mostrare tutte le possibili corrispondenze a una query personalizzata. Questo controllo funge da casella di suggerimenti in tempo reale non appena l'utente digita nell'area di immissione.<md-autocomplete>può essere utilizzato per fornire risultati di ricerca da origini dati locali o remote. md-autocomplete memorizza nella cache i risultati durante l'esecuzione di una query. Dopo la prima chiamata, utilizza i risultati memorizzati nella cache per eliminare le richieste del server o la logica di ricerca non necessarie e può essere disabilitato.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-autocomplete.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * md-items Un'espressione nel formato dell'elemento negli elementi per scorrere le corrispondenze per la ricerca. |
| 2 | md-selected-item-change Un'espressione da eseguire ogni volta che viene selezionato un nuovo elemento. |
| 3 | md-search-text-change Un'espressione da eseguire ogni volta che il testo di ricerca viene aggiornato. |
| 4 | md-search-text Un modello a cui associare il testo della query di ricerca. |
| 5 | md-selected-item Un modello a cui legare l'elemento selezionato. |
| 6 | md-item-text Un'espressione che convertirà il tuo oggetto in una singola stringa. |
| 7 | placeholder Testo segnaposto che verrà inoltrato all'input. |
| 8 | md-no-cache Disabilita la memorizzazione nella cache interna che avviene nel completamento automatico. |
| 9 | ng-disabled Determina se disabilitare o meno il campo di input. |
| 10 | md-min-length Specifica la lunghezza minima del testo prima che il completamento automatico fornisca suggerimenti. |
| 11 | md-delay Specifica la quantità di tempo (in millisecondi) da attendere prima di cercare i risultati. |
| 12 | md-autofocus Se true, focalizzerà immediatamente l'elemento di input. |
| 13 | md-autoselect Se vero, il primo elemento sarà selezionato per impostazione predefinita. |
| 14 | md-menu-class Questo verrà applicato al menu a discesa per lo styling. |
| 15 | md-floating-label Questo aggiungerà un'etichetta mobile per il completamento automatico e la avvolgerà nel contenitore md-input. |
| 16 | md-input-name L'attributo name assegnato all'elemento di input da utilizzare con FormController. |
| 17 | md-input-id Un ID da aggiungere all'elemento di input. |
| 18 | md-input-minlength La lunghezza minima per il valore dell'input per la convalida. |
| 19 | md-input-maxlength La lunghezza massima per il valore dell'input per la convalida. |
| 20 | md-select-on-match Se impostato su true, il completamento automatico selezionerà automaticamente l'elemento esatto se il testo di ricerca corrisponde esattamente. |
Esempio
L'esempio seguente mostra l'uso di md-autocomplete direttiva e anche l'uso del completamento automatico.
am_autocomplete.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('autoCompleteController', autoCompleteController);
function autoCompleteController ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of states to be displayed
self.states = loadStates();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("This functionality is yet to be implemented!");
}
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) :
self.states, deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () {
deferred.resolve( results );
},
Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
//build list of states as map of key-value pairs
function loadStates() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
//filter function for search query
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
</script>
</head>
<body ng-app = "firstApplication" ng-cloak>
<div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
<md-content class = "md-padding">
<form ng-submit = "$event.preventDefault()">
<p><code>md-autocomplete</code> can be used to provide search results from
local or remote data sources.</p>
<md-autocomplete
ng-disabled = "ctrl.isDisabled"
md-no-cache = "ctrl.noCache"
md-selected-item = "ctrl.selectedItem"
md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
md-search-text = "ctrl.searchText"
md-selected-item-change = "ctrl.selectedItemChange(item)"
md-items = "item in ctrl.querySearch(ctrl.searchText)"
md-item-text = "item.display"
md-min-length = "0"
placeholder = "US State?">
<md-item-template>
<span md-highlight-text = "ctrl.searchText"
md-highlight-flags = "^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
<br/>
<md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
</md-checkbox>
<md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
<md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
<p><code>md-autocomplete</code> caches results when performing a query.
After first call, it uses the cached results to eliminate unnecessary
server requests or lookup logic and it can be disabled.</p>
</form>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il $mdBottomSheet, un servizio angolare, viene utilizzato per aprire un foglio inferiore sull'applicazione e fornisce una semplice API promessa.
| SN | Metodo e descrizione | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | $mdBottomSheet.show(options); Mostra un foglio inferiore con le opzioni specificate.
|
Esempio
L'esempio seguente mostra l'uso di $mdBottomSheet servizio e anche l'uso del lenzuolo di sotto.
am_bottomsheet.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('bottomSheetController', bottomSheetController);
function bottomSheetController ($scope, $mdBottomSheet) {
$scope.openBottomSheet = function() {
$mdBottomSheet.show ({
template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
});
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div ng-controller = "bottomSheetController as ctrl" layout = "column">
<md-content class = "md-padding">
<form ng-submit = "$event.preventDefault()">
<md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
Open Bottom Sheet!
</md-button>
</form>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-card, una direttiva angolare, è una direttiva contenitore e viene utilizzata per disegnare carte nell'applicazione angularjs. La tabella seguente elenca le direttive angolari e le classi usate in md-card.
| Suor n | Direttiva / Classe e descrizione |
|---|---|
| 1 | <md-card-header> Intestazione per la carta, contiene avatar, testo e immagine quadrata. |
| 2 | <md-card-avatar> Avatar di carta. |
| 3 | md-user-avatar Classe per l'immagine dell'utente. |
| 4 | <md-icon> Direttiva sulle icone. |
| 5 | <md-card-header-text> Contiene elementi per la descrizione della carta. |
| 6 | md-title Classe per il titolo della carta. |
| 7 | md-subhead Classe per il sottotitolo della carta. |
| 8 | <img> Immagine per la carta. |
| 9 | <md-card-title> Titolo del contenuto della scheda. |
| 10 | <md-card-title-text> Contenitore di testo del titolo della carta. |
| 11 | md-headline Classe per il titolo del contenuto della carta. |
| 12 | md-subhead Classe per l'intestazione secondaria del contenuto della carta. |
| 13 | <md-card-title-media> Immagine quadrata all'interno del titolo. |
| 14 | md-media-sm Classe per piccola immagine. |
| 15 | md-media-md Classe per immagine media. |
| 16 | md-media-lg Classe per immagini grandi. |
| 17 | <md-card-content> Contenuto della carta. |
| 18 | md-media-xl Classe per immagini extra large. |
| 19 | <md-card-actions> Azioni delle carte. |
| 20 | <md-card-icon-actions> Azioni delle icone. |
Esempio
L'esempio seguente mostra l'uso della direttiva md-card e anche l'uso delle classi di carte.
am_cards.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('cardController', cardController);
function cardController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<md-card>
<img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5">
<md-card-header>
<md-card-avatar>
<img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg">
</md-card-avatar>
<md-card-header-text>
<span class = "md-title">HTML5</span>
<span class = "md-subhead">Learn HTML5 @TutorialsPoint.com</span>
</md-card-header-text>
</md-card-header>
<md-card-title>
<md-card-title-text>
<span class = "md-headline">HTML5</span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout = "row" layout-align = "start center">
<md-button>Download</md-button>
<md-button>Start</md-button>
<md-card-icon-actions>
<md-button class = "md-icon-button" aria-label = "icon">
<md-icon class = "material-icons">add</md-icon>
</md-button>
</md-card-icon-actions>
</md-card-actions>
<md-card-content>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
Web Hypertext Application Technology Working Group (WHATWG).</p>
</p>The new standard incorporates features like video playback and
drag-and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-card-content>
</md-card>
</body>
</html>Risultato
Verifica il risultato.
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à:
|
| 15 | Schede 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 pulsanti relativi. |
| 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 il 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. |
Direttiva layout
La direttiva layout su un elemento contenitore viene utilizzata per specificare la direzione del layout per i suoi figli. Di seguito sono riportati i valori assegnabili per la direttiva layout:
row - Gli articoli sono disposti orizzontalmente con max-height = 100% e max-width è la larghezza degli articoli nel contenitore.
column - Gli articoli sono disposti verticalmente con larghezza massima = 100% e altezza massima è l'altezza degli articoli nel contenitore.
Affinché la progettazione reattiva come il layout venga modificata automaticamente in base alle dimensioni dello schermo del dispositivo, è possibile utilizzare le API di layout elencate nella tabella seguente per impostare la direzione del layout per i dispositivi con larghezza di visualizzazione.
| Suor n | API e larghezza del dispositivo quando il punto di interruzione sostituisce il valore predefinito |
|---|---|
| 1 | layout Imposta la direzione del layout di default a meno che non venga sovrascritta da un altro punto di interruzione. |
| 2 | layout-xs larghezza <600 px |
| 3 | layout-gt-xs larghezza> = 600 px |
| 4 | layout-sm 600px <= larghezza <960px |
| 5 | layout-gt-sm larghezza> = 960 px |
| 6 | layout-md 960px <= larghezza <1280px |
| 7 | layout-gt-md larghezza> = 1280 px |
| 8 | layout-lg 1280px <= larghezza <1920px |
| 9 | layout-gt-lg larghezza> = 1920 px |
| 10 | layout-xl larghezza> = 1920 px |
Esempio
L'esempio seguente mostra l'uso della direttiva layout e anche gli usi del layout.
am_layouts.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-align:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('layoutController', layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "layoutContainer" ng-controller = "layoutController as ctrl"
style = "height:100px;" ng-cloak>
<div layout = "row" layout-xs = "column">
<div flex class = "green box">Row 1: Item 1</div>
<div flex = "20" class = "blue box">Row 1: Item 2</div>
</div>
<div layout = "column" layout-xs = "column">
<div flex = "33" class = "green box">Column 1: item 1</div>
<div flex = "66" class = "blue box">Column 1: item 2</div>
</div>
</div>
</body>
</html>Risultato
Verifica il risultato.
Direttiva Flex
La direttiva flex su un elemento contenitore viene utilizzata per personalizzare la dimensione e la posizione degli elementi. Definisce il modo in cui l'elemento deve regolare la sua dimensione rispetto al suo contenitore principale e agli altri elementi all'interno del contenitore. Di seguito sono riportati i valori assegnabili per la direttiva flex:
multiples of 5 - 5, 10, 15 ... 100
33 - 33%
66 - 66%
Esempio
L'esempio seguente mostra l'uso della direttiva flex e anche gli usi di flex.
am_flex.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.box {
color:white;
padding:10px;
text-align:center;
border-style: inset;
}
.green {
background:green;
}
.blue {
background:blue;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('layoutController', layoutController);
function layoutController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "layoutContainer" ng-controller = "layoutController as ctrl"
layout = "row" style = "height:100px;" ng-cloak layout-wrap>
<div flex = "30" class = "green box">
[flex = "30"]
</div>
<div flex = "45" class = "blue box">
[flex = "45"]
</div>
<div flex = "25" class = "green box">
[flex = "25"]
</div>
<div flex = "33" class = "green box">
[flex = "33"]
</div>
<div flex = "66" class = "blue box">
[flex = "66"]
</div>
<div flex = "50" class = "blue box">
[flex = "50"]
</div>
<div flex class = "green box">
[flex]
</div>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-input-container, una direttiva angolare, è un componente contenitore che contiene qualsiasi file <input> o <textarea>elemento da bambino. Supporta anche la gestione degli errori utilizzando le direttive standard ng-messages e anima i messaggi utilizzando gli eventi ngEnter / ngLeave o gli eventi ngShow / ngHide.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-input-container.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | md-maxlength Il numero massimo di caratteri consentito in questo input. Se viene specificato, verrà visualizzato un contatore di caratteri sotto l'input. Lo scopo di md-maxlength è mostrare il testo del contatore della lunghezza massima. Se non vuoi il testo del contatore e hai solo bisogno di una convalida "semplice", puoi usare gli attributi "semplici" ng-maxlength o maxlength. |
| 2 | aria-label Aria-label è richiesta quando non è presente alcuna etichetta. Se un'etichetta non è presente, verrà registrato un messaggio di avviso nella console. |
| 3 | placeholder Un approccio alternativo all'utilizzo di aria-label quando l'etichetta non è presente. Il testo segnaposto viene copiato nell'attributo aria-label. |
| 4 | md-no-autogrow Quando presenti, le textareas non cresceranno automaticamente. |
| 5 | md-detect-hidden Quando presenti, le aree di testo saranno dimensionate correttamente quando vengono rivelate dopo essere state nascoste. Questo è disattivato per impostazione predefinita per motivi di prestazioni perché garantisce un reflow ad ogni ciclo digest. |
Esempio
L'esempio seguente mostra l'uso della direttiva md-input-container e anche gli usi degli input.
am_inputs.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('inputController', inputController);
function inputController ($scope) {
$scope.project = {
comments: 'Comments',
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "inputContainer" class = "inputDemo"
ng-controller = "inputController as ctrl" ng-cloak>
<md-content layout-padding>
<form name = "projectForm">
<md-input-container class = "md-block">
<label>User Name</label>
<input required name = "userName" ng-model = "project.userName">
<div ng-messages = "projectForm.userName.$error">
<div ng-message = "required">This is required.</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Email</label>
<input required type = "email" name = "userEmail"
ng-model = "project.userEmail"
minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" />
<div ng-messages = "projectForm.userEmail.$error" role = "alert">
<div ng-message-exp = "['required', 'minlength', 'maxlength',
'pattern']">
Your email must be between 10 and 100 characters long and should
be a valid email address.
</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Comments</label>
<input md-maxlength = "300" required name = "comments"
ng-model = "project.comments">
<div ng-messages = "projectForm.comments.$error">
<div ng-message = "required">This is required.</div>
<div ng-message = "md-maxlength">The comments has to be less
than 300 characters long.</div>
</div>
</md-input-container>
</form>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-icon, una direttiva angolare, è un componente per mostrare le icone basate su vettori nell'applicazione. Supporta anche i caratteri delle icone e le icone SVG oltre a utilizzare le icone dei materiali di Google.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-icon.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * md-font-icon Questo è il nome della stringa dell'icona CSS associata al tipo di carattere, che verrà utilizzata per rendere l'icona. Richiede che i caratteri e gli stili CSS con nome siano precaricati. |
| 2 | * md-font-set Questo è il nome dello stile CSS associato alla libreria dei caratteri, che verrà assegnato come classe per la legatura dell'icona del carattere. Questo valore può anche essere un alias utilizzato per cercare il nome della classe; utilizzare internamente $ mdIconProvider.fontSet (<alias>) per determinare il nome dello stile. |
| 3 | * md-svg-src Questo è l'URL della stringa (o espressione) utilizzato per caricare, memorizzare nella cache e visualizzare un SVG esterno. |
| 4 | * md-svg-icon Questo è il nome della stringa utilizzato per la ricerca dell'icona dalla cache interna; possono essere utilizzate anche stringhe o espressioni interpolate. È possibile utilizzare nomi di set specifici con la sintassi <nome set>: <nome icona>. Per utilizzare i set di icone, gli sviluppatori devono preregistrare i set utilizzando il servizio $ mdIconProvider. |
| 5 | aria-label Questa icona etichetta per l'accessibilità. Se viene fornita una stringa vuota, l'icona verrà nascosta dal livello di accessibilità con aria-hidden = "true". Se non è presente un'etichetta aria sull'icona né un'etichetta sull'elemento padre, verrà registrato un avviso nella console. |
| 6 | alt Questa icona etichetta per l'accessibilità. Se viene fornita una stringa vuota, l'icona verrà nascosta dal livello di accessibilità con aria-hidden = "true". Se non è presente alcun alt sull'icona né un'etichetta sull'elemento padre, verrà registrato un avviso nella console. |
Esempio
L'esempio seguente mostra l'uso della direttiva md-icons e anche l'uso delle icone.
am_icons.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.iconDemo .glyph {
border-bottom: 1px dotted #ccc;
padding: 10px 0 20px;
margin-bottom: 20px;
}
.iconDemo .preview-glyphs {
display: flex;
flex-direction: row;
}
.iconDemo .step {
flex-grow: 1;
line-height: 0.5;
}
.iconDemo .material-icons.md-18 {
font-size: 18px;
}
.iconDemo .material-icons.md-24 {
font-size: 24px;
}
.iconDemo .material-icons.md-36 {
font-size: 36px;
}
.iconDemo .material-icons.md-48 {
font-size: 48px;
}
.iconDemo .material-icons.md-dark {
color: rgba(0, 0, 0, 0.54);
}
.iconDemo .material-icons.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
.iconDemo .material-icons.md-light {
color: white;
}
.iconDemo .material-icons.md-light.md-inactive {
color: rgba(255, 255, 255, 0.3);
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('iconController', iconController);
function iconController ($scope) {
var iconData = [
{name: 'accessibility' , color: "#777" },
{name: 'question_answer', color: "rgb(89, 226, 168)" },
{name: 'backup' , color: "#A00" },
{name: 'email' , color: "#00A" }
];
$scope.fonts = [].concat(iconData);
$scope.sizes = [
{size:"md-18",padding:0},
{size:"md-24",padding:2},
{size:"md-36",padding:6},
{size:"md-48",padding:10}
];
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "iconContainer" class = "iconDemo"
ng-controller = "iconController as ctrl" ng-cloak>
<div class = "glyph" ng-repeat = "font in fonts" layout = "row">
<div ng-repeat = "it in sizes" flex layout-align = "center center"
style = "text-align: center;" layout = "column">
<div flex></div>
<div class = "preview-glyphs">
<md-icon ng-style = "{color: font.color}"
aria-label = "{{ font.name }}"
class = "material-icons step"
ng-class = "it.size">
{{ font.name }}
</md-icon>
</div>
</div>
</div>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-grid-list, una direttiva angolare, è un componente per la disposizione del contenuto per dimensioni dello schermo variabili. Una griglia ha 12 colonne nella schermata delle dimensioni del desktop, 8 nella schermata delle dimensioni del tablet e 4 nella schermata delle dimensioni del telefono, dove ogni dimensione ha margini e margini interni predefiniti. Le celle sono disposte in modo sequenziale in una riga, nell'ordine in cui sono definite.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-grid-list.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * md-cols Questo è per il numero di colonne nella griglia. |
| 2 | * md-row-height Uno di
|
| 3 | md-gutter La quantità di spazio tra le tessere in unità CSS (predefinito 1px). |
| 4 | md-on-layout Espressione da valutare dopo il layout. L'oggetto evento è disponibile come $ evento e contiene informazioni sulle prestazioni. |
Esempio
L'esempio seguente mostra l'uso di md-grid-list direttiva e anche gli usi della rete.
am_grid.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('gridController', gridController);
function gridController ($scope) {
var COLORS = [
'#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336',
'#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252',
'#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a',
'#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab',
'#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8',
'#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc',
'#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb',
'#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92',
'#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da',
'#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593',
'#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd',
'#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5',
'#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff',
'#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4',
'#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
'#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1',
'#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
'#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb',
'#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b',
'#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9',
'#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047',
'#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676',
'#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65',
'#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90',
'#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c',
'#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24',
'#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7',
'#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835',
'#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00',
'#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28',
'#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f',
'#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80',
'#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00',
'#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7',
'#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e',
'#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00',
'#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4',
'#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c',
'#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c'
];
this.colorTiles = (function() {
var tiles = [];
for (var i = 0; i < 46; i++) {
tiles.push ({
color: randomColor(),
colspan: randomSpan(),
rowspan: randomSpan()
});
}
return tiles;
})();
function randomColor() {
return COLORS[Math.floor(Math.random() * COLORS.length)];
}
function randomSpan() {
var r = Math.random();
if (r < 0.8) {
return 1;
} else if (r < 0.9) {
return 2;
} else {
return 3;
}
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
<md-content layout-padding>
<md-grid-list
md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
md-row-height-gt-md = "1:1" md-row-height = "4:3"
md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
<md-grid-tile
ng-repeat = "tile in ctrl.colorTiles"
ng-style = "{
'background': tile.color
}"
md-colspan-gt-sm = "{{tile.colspan}}"
md-rowspan-gt-sm = "{{tile.rowspan}}">
</md-grid-tile>
</md-grid-list>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
Ridimensiona lo schermo per vedere l'effetto.
Il md-sidenav, una direttiva Angular viene utilizzata per mostrare un componente contenitore che può essere mostrato o nascosto a livello di programmazione. Per impostazione predefinita, scorre sopra la parte superiore dell'area di contenuto principale.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-sidenav
| Suor n | Parametro e descrizione |
|---|---|
| 1 | md-is-open Un modello vincolato all'apertura del sidenav. |
| 2 | md-component-id componentId da utilizzare con il servizio $ mdSidenav. |
| 3 | md-is-locked-open Quando questa espressione viene valutata come vera, il sidenav "si apre": cade nel flusso del contenuto invece di apparire sopra di esso. Questo sovrascrive l'attributo is-open. Il servizio $ mdMedia () è esposto all'attributo is-locked-open, a cui può essere assegnata una media query o uno dei preset sm, gt-sm, md, gt-md, lg o gt-lg. Examples - |
Esempio
L'esempio seguente mostra l'uso di md-sidenav e anche gli usi di sidenav componente.
am_sidenav.htm
<html lang = "en">
<head>
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('sideNavController', sideNavController);
function sideNavController ($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
$scope.openRightMenu = function() {
$mdSidenav('right').toggle();
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "sideNavContainer" ng-controller = "sideNavController as ctrl"
layout = "row" ng-cloak>
<md-sidenav md-component-id = "left" class = "md-sidenav-left">
Welcome to TutorialsPoint.Com</md-sidenav>
<md-content>
<md-button ng-click = "openLeftMenu()">Open Left Menu</md-button>
<md-button ng-click = "openRightMenu()">Open Right Menu</md-button>
</md-content>
<md-sidenav md-component-id = "right" class = "md-sidenav-right">
<md-button href = "http://google.com">Google</md-button>
</md-sidenav>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-fab-speed-dial, una direttiva Angular, viene utilizzata per mostrare una serie di elementi popup o pulsanti per un rapido accesso alle azioni comuni.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-fab-speed-dial.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * md-direction Ciò determina la direzione in cui deve apparire la selezione rapida rispetto all'elemento di attivazione. |
| 2 | md-open Ciò consente di controllare a livello di codice se la chiamata rapida è visibile o meno. |
Esempio
L'esempio seguente mostra l'uso della direttiva md-fab-speed-dial e anche gli usi della composizione rapida.
am_speeddial.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.fabSpeedDial .text-capitalize {
text-transform: capitalize;
}
.fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
background-color: #000 !important;
}
.fabSpeedDial p.note {
font-size: 1.2rem;
}
.fabSpeedDial .lock-size {
min-width: 300px;
min-height: 300px;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('speedDialController', speedDialController);
function speedDialController ($scope) {
this.topDirections = ['left', 'up'];
this.bottomDirections = ['down', 'right'];
this.isOpen = false;
this.availableModes = ['md-fling', 'md-scale'];
this.selectedMode = 'md-fling';
this.availableDirections = ['up', 'down', 'left', 'right'];
this.selectedDirection = 'up';
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "fabSpeedDial" id = "speedDialContainer"
ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak>
<md-content>
<div class = "lock-size" layout = "row" layout-align = "center center">
<md-fab-speed-dial md-open = "ctrl.isOpen"
md-direction = "{{ctrl.selectedDirection}}"
ng-class = "ctrl.selectedMode">
<md-fab-trigger>
<md-button aria-label = "menu" class = "md-fab md-warn">
<md-icon class = "material-icons">menu</md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label = "Add" class = "md-fab md-raised md-mini
md-accent">
<md-icon class = "material-icons" aria-label = "Add">
add</md-icon>
</md-button>
<md-button aria-label = "Insert Link" class = "md-fab md-raised
md-mini md-accent">
<md-icon class = "material-icons" aria-label = "Insert Link">
insert_link</md-icon>
</md-button>
<md-button aria-label = "Edit" class = "md-fab md-raised md-mini
md-accent">
<md-icon class = "material-icons" aria-label = "Edit">
mode_edit</md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
<div layout = "row" layout-align = "space-around">
<div layout = "column" layout-align = "start center">
<b>Direction</b>
<md-radio-group ng-model = "ctrl.selectedDirection">
<md-radio-button ng-repeat = "direction in ctrl.availableDirections"
ng-value = "direction" class = "text-capitalize">
{{direction}}
</md-radio-button>
</md-radio-group>
</div>
<div layout = "column" layout-align = "start center">
<b>Open/Closed</b>
<md-checkbox ng-model = "ctrl.isOpen">
Open
</md-checkbox>
</div>
<div layout = "column" layout-align = "start center">
<b>Animation Modes</b>
<md-radio-group ng-model = "ctrl.selectedMode">
<md-radio-button ng-repeat = "mode in ctrl.availableModes"
ng-value = "mode">
{{mode}}
</md-radio-button>
</md-radio-group>
</div>
</div>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-subheader, una direttiva Angular, viene utilizzata per mostrare un sottotitolo per una sezione.
Esempio
Il seguente esempio mostra l'uso di md-subheader e anche gli usi del componente subheader.
am_subheaders.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('subheaderController', subheaderController);
function subheaderController ($scope) {
$scope.fruitNames = ['Apple', 'Banana', 'Orange'];
$scope.vegNames = ['Carrot', 'Potato', 'Cabbage'];
$scope.eateries = ['Milk', 'Bread'];
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
layout = "column" flex layout-fill ng-cloak>
<md-toolbar md-scroll-shrink>
<div class = "md-toolbar-tools">Items</div>
</md-toolbar>
<md-content style = "height: 600px;">
<section>
<md-subheader class = "md-primary">Fruits</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat = "fruits in fruitNames">
<div>
<p>{{fruits}}</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader class = "md-warn">Vegetables</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat = "veg in vegNames">
<div>
<p>{{veg}}</p>
</div>
</md-list-item>
</md-list>
</section>
<section>
<md-subheader>Eateries</md-subheader>
<md-list layout-padding>
<md-list-item ng-repeat = "eatery in eateries">
<div>
<p>{{eatery}}</p>
</div>
</md-list-item>
</md-list>
</section>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
La funzionalità Swipe è pensata per i dispositivi mobili. Le seguenti direttive vengono utilizzate per gestire gli swipe.
md-swipe-down, viene utilizzata una direttiva Angular per specificare il comportamento personalizzato quando un elemento viene fatto scorrere verso il basso.
md-swipe-left, viene utilizzata una direttiva Angular per specificare il comportamento personalizzato quando un elemento viene fatto scorrere a sinistra.
md-swipe-right, viene utilizzata una direttiva Angular per specificare il comportamento personalizzato quando un elemento viene fatto scorrere a destra.
md-swipe-up, una direttiva Angular viene utilizzata per specificare il comportamento personalizzato quando un elemento viene fatto scorrere verso l'alto.
Esempio
L'esempio seguente mostra l'uso di md-swipe- * e anche gli usi dei componenti di swipe.
am_swipes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.swipeContainer .demo-swipe {
padding: 20px 10px;
}
.swipeContainer .no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('swipeController', swipeController);
function swipeController ($scope) {
$scope.onSwipeLeft = function(ev) {
alert('Swiped Left!');
};
$scope.onSwipeRight = function(ev) {
alert('Swiped Right!');
};
$scope.onSwipeUp = function(ev) {
alert('Swiped Up!');
};
$scope.onSwipeDown = function(ev) {
alert('Swiped Down!');
};
}
</script>
</head>
<body ng-app = "firstApplication">
<md-card>
<div id = "swipeContainer" ng-controller = "swipeController as ctrl"
layout = "row" ng-cloak>
<div flex>
<div class = "demo-swipe" md-swipe-left = "onSwipeLeft()">
<span class = "no-select">Swipe me to the left</span>
<md-icon md-font-icon = "android" aria-label = "android"></md-icon>
</div>
<md-divider></md-divider>
<div class = "demo-swipe" md-swipe-right = "onSwipeRight()">
<span class = "no-select">Swipe me to the right</span>
</div>
</div>
<md-divider></md-divider>
<div flex layout = "row">
<div flex layout = "row" layout-align = "center center"
class = "demo-swipe" md-swipe-up = "onSwipeUp()">
<span class = "no-select">Swipe me up</span>
</div>
<md-divider></md-divider>
<div flex layout = "row" layout-align = "center center"
class = "demo-swipe" md-swipe-down = "onSwipeDown()">
<span class = "no-select">Swipe me down</span>
</div>
</div>
</div>
</md-card>
</body>
</html>Risultato
Verifica il risultato.
Il md-switch, una direttiva angolare, viene utilizzata per mostrare un interruttore.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-switch.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | * ng-model L'espressione angolare assegnabile a cui legare i dati. |
| 2 | name Il nome della proprietà del modulo in cui è pubblicato il controllo. |
| 3 | ng-true-value Il valore su cui deve essere impostata l'espressione quando selezionata. |
| 4 | ng-false-value Il valore a cui deve essere impostata l'espressione quando non è selezionata. |
| 5 | ng-change L'espressione angolare da eseguire quando l'input cambia a causa dell'interazione dell'utente con l'elemento di input. |
| 6 | ng-disabled En / Disable in base all'espressione. |
| 7 | md-no-ink L'uso dell'attributo indica l'uso di effetti di inchiostro ondulato. |
| 8 | aria-label Questo pubblica l'etichetta del pulsante usata dagli screen reader per l'accessibilità. Il valore predefinito è il testo dello switch. |
Esempio
L'esempio seguente mostra l'uso di md-swipe- * e anche gli usi dei componenti di swipe.
am_switches.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('switchController', switchController);
function switchController ($scope) {
$scope.data = {
switch1: true,
switch2: false,
switch3: false,
switch4: true,
switch5: true,
switch6: false
};
$scope.message = 'false';
$scope.onChange = function(state) {
$scope.message = state;
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "switchContainer" ng-controller = "switchController as ctrl"
layout = "column" ng-cloak>
<md-switch ng-model = "data.switch1" aria-label = "Switch 1">
Switch 1: {{ data.switch1 }}
</md-switch>
<md-switch ng-model = "data.switch2" aria-label = "Switch 2"
ng-true-value = "'true'" ng-false-value = "'false'" class = "md-warn">
Switch 2 (md-warn): {{ data.switch2 }}
</md-switch>
<md-switch ng-disabled = "true" aria-label = "Disabled switch"
ng-model = "disabledModel">
Switch 3 (Disabled)
</md-switch>
<md-switch ng-disabled = "true" aria-label = "Disabled active switch"
ng-model = "data.switch4">
Switch 4 (Disabled, Active)
</md-switch>
<md-switch class = "md-primary" md-no-ink aria-label = "Switch No Ink"
ng-model = "data.switch5">
Switch 5 (md-primary): No Ink
</md-switch>
<md-switch ng-model = "data.switch6" aria-label = "Switch 6"
ng-change = "onChange(data.switch6)">
Switch 6 : {{ message }}
</md-switch>
</div>
</body>
</html>Risultato
Verifica il risultato.
I componenti Angular Material utilizzano le classi del gruppo di intenzione come md-primary, md-accent, md-warn e classi aggiuntive per le differenze di colore come md-hue-1, md-hue-2 o md-hue-3. I seguenti componenti supportano l'uso delle classi sopra menzionate.
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
I temi possono essere configurati utilizzando $ mdThemingProvider durante la configurazione dell'applicazione. Le seguenti proprietà possono essere utilizzate per assegnare diverse tavolozze di colori.
- primaryPalette
- accentPalette
- warnPalette
- backgroundPalette
Esempio
Il seguente esempio mostra l'uso dei temi nell'applicazione Angular JS.
am_themes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('themeController', themeController)
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('customTheme')
.primaryPalette('grey')
.accentPalette('orange')
.warnPalette('red');
});
function themeController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Default Theme</h2>
</div>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</div></md-toolbar>
<md-toolbar class = "md-accent">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</div>
</md-toolbar>
</md-card-content>
</md-card>
<div md-theme = "customTheme">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Custom Theme</h2>
</div>
</md-toolbar>
<hr/>
<md-card>
<md-card-content layout = "column">
<md-toolbar class = "md-primary">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-primary md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-accent md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-1">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
</div>
</md-toolbar>
<md-toolbar class = "md-warn md-hue-2">
<div class = "md-toolbar-tools">
<h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
</div>
</md-toolbar>
</md-card-content>
</md-card>
</div>
</div>
</body>
</html>Risultato
Verifica il risultato.
The Angular Material fornisce vari metodi speciali per mostrare avvisi discreti agli utenti. Fornisce anche un termine brindisi per loro. Il servizio $ mdToast viene utilizzato per mostrare i toast.
Esempio
L'esempio seguente mostra l'uso di toast.
am_toasts.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('toastController', toastController);
function toastController ($scope, $mdToast, $document) {
$scope.showToast1 = function() {
$mdToast.show (
$mdToast.simple()
.textContent('Hello World!')
.hideDelay(3000)
);
};
$scope.showToast2 = function() {
var toast = $mdToast.simple()
.textContent('Hello World!')
.action('OK')
.highlightAction(false);
$mdToast.show(toast).then(function(response) {
if ( response == 'ok' ) {
alert('You clicked \'OK\'.');
}
});
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "toastContainer" ng-controller = "toastController as ctrl"
layout = "row" ng-cloak>
<md-button ng-click = "showToast1()">Show Simple Alert</md-button>
<md-button ng-click = "showToast2()">Show Alert with callback</md-button>
</div>
</body>
</html>Risultato
Verifica il risultato.
Angular Material fornisce varie classi CSS tipografiche che possono essere utilizzate per creare coerenza visiva nell'applicazione Angular JS.
La tabella seguente elenca le diverse classi con la loro descrizione.
| Suor n | Nome e descrizione della classe |
|---|---|
| 1 | md-display-1 Mostra il testo con Regular 34px. |
| 2 | md-display-2 Mostra il testo con Regular 45px. |
| 3 | md-display-3 Mostra il testo con Regular 56px. |
| 4 | md-display-4 Mostra il testo con Light 112px. |
| 5 | md-headline Mostra il testo con 24px regolare. |
| 6 | md-title Mostra il testo con Medio 20px. |
| 7 | md-subhead Mostra il testo con Regular 16px. |
| 8 | md-body-1 Mostra il testo con Regular 14px. |
| 9 | md-body-2 Mostra il testo con Medio 14px. |
| 10 | md-button Mostra il pulsante con Medio 14px. |
| 11 | md-caption Mostra il testo con 12px regolare. |
Esempio
L'esempio seguente mostra l'uso delle classi CSS di tipografia.
am_typography.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('typographyController', typographyController);
function typographyController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "typographyController as ctrl"
layout = "column" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<p class = "md-display-4">.md-display-4</p>
<p class = "md-display-3">.md-display-3</p>
<p class = "md-display-2">.md-display-2</p>
<p class = "md-display-1">.md-display-1</p>
<p class = "md-headline">.md-headline</p>
<p class = "md-title">.md-title</p>
<p class = "md-subhead">.md-subhead</p>
<p class = "md-body-1">.md-body-1</p>
<p class = "md-body-2">.md-body-2</p>
<md-button>.md-button</md-button>
<p class = "md-caption">.md-caption</p>
</div>
</body>
</html>Risultato
Verifica il risultato.
Il md-virtual-repeat-container è il contenitore di scorrimento per il componente md-virtual-repeat.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-virtual-repeat-container.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | md-top-index Associa l'indice dell'elemento che si trova nella parte superiore del contenitore di scorrimento a $ scope. Può sia leggere che impostare la posizione di scorrimento. |
| 2 | md-orient-horizontal Determina se il contenitore deve scorrere orizzontalmente (l'impostazione predefinita è l'orientamento e lo scorrimento verticale). |
| 3 | md-auto-shrink Se presente, il contenitore si ridurrà per adattarsi al numero di articoli quando tale numero è inferiore alla sua dimensione originale. |
| 4 | md-auto-shrink-min Numero minimo di elementi a cui md-auto-shrink si ridurrà (predefinito: 0). |
md-virtual-repeat
La ripetizione virtuale è un sostituto di ng-repeat per rendere solo gli elementi HTML sufficienti per riempire il contenitore e riutilizzarli quando l'utente scorre.
Attributi
La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-virtual-repeat.
| Suor n | Parametro e descrizione |
|---|---|
| 1 | md-item-size L'altezza o la larghezza degli elementi ripetuti (che deve essere identica per ogni elemento). Questo è opzionale. Questo tenta di leggere la dimensione dal dominio se mancante, ma presuppone comunque che tutti i nodi ripetuti abbiano la stessa altezza o larghezza. |
| 2 | md-extra-name Valuta un nome aggiuntivo a cui è possibile assegnare l'elemento corrente iterato nell'ambito ripetuto (necessario per l'uso in md-autocomplete). |
| 3 | md-on-demand Quando è presente, tratta il file md-virtual-repeat argomento come un oggetto che può recuperare righe anziché un array.Questo oggetto deve implementare la seguente interfaccia con due (2) metodi:
|
Esempio
L'esempio seguente mostra l'uso della ripetizione virtuale.
am_virtualrepeat.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.vrepeatContainer #horizontal-container {
height: 100px;
width: 830px;
}
.vrepeatContainer #vertical-container {
height: 292px;
width: 400px;
}
.vrepeatContainer .repeated-item-horizontal {
border-right: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
height: 84px;
padding-top: 35px;
text-align: center;
width: 50px;
}
.vrepeatContainer .repeated-item-vertical {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding-top: 10px;
}
.vrepeatContainer md-content {
margin: 16px;
}
.vrepeatContainer md-virtual-repeat-container {
border: solid 1px grey;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('vrepeatController', vrepeatController);
function vrepeatController ($scope) {
this.items = [];
for (var i = 0; i < 1000; i++) {
this.items.push(i);
}
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
ng-cloak>
<md-content layout = "column">
<h2>Horizontal Repeat</h2>
<md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
<div md-virtual-repeat = "item in ctrl.items"
class = "repeated-item-horizontal" flex>
{{item}}
</div>
</md-virtual-repeat-container>
<h2>Vertical Repeat</h2>
<md-virtual-repeat-container id = "vertical-container">
<div md-virtual-repeat = "item in ctrl.items"
class = "repeated-item-vertical" flex>
{{item}}
</div>
</md-virtual-repeat-container>
</md-content>
</div>
</body>
</html>Risultato
Verifica il risultato.
Angular Material ha diverse classi speciali per visualizzare i contenitori come carte simili a carta con ombre.
La tabella seguente elenca le diverse classi con la loro descrizione.
| Suor n | Nome e descrizione della classe |
|---|---|
| 1 | md-whiteframe-1dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 1px. Aggiunge zdepth di 1. |
| 2 | md-whiteframe-2dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 2px. Aggiunge zdepth di 2. |
| 3 | md-whiteframe-3dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 3px. Aggiunge zdepth di 3. |
| 4 | md-whiteframe-4dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 4px. Aggiunge zdepth di 4. |
| 5 | md-whiteframe-5dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 5px. Aggiunge zdepth di 5. |
| 6 | md-whiteframe-6dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 6px. Aggiunge zdepth di 6. |
| 7 | md-whiteframe-7dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 7px. Aggiunge zdepth di 7. |
| 8 | md-whiteframe-8dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 8px. Aggiunge zdepth di 8. |
| 9 | md-whiteframe-9dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 9px. Aggiunge zdepth di 9. |
| 10 | md-whiteframe-10dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 10px. Aggiunge profondità z di 10. |
| 11 | md-whiteframe-11dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 11px. Aggiunge profondità z di 11. |
| 12 | md-whiteframe-12dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 12px. Aggiunge profondità z di 12. |
| 13 | md-whiteframe-13dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 13px. Aggiunge profondità z di 13. |
| 14 | md-whiteframe-14dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 14px. Aggiunge profondità z di 14. |
| 15 | md-whiteframe-15dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 15px. Aggiunge una profondità z di 15. |
| 16 | md-whiteframe-16dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 16px. Aggiunge profondità z di 16. |
| 17 | md-whiteframe-17dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 17px. Aggiunge profondità z di 17. |
| 18 | md-whiteframe-18dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 18px. Aggiunge una profondità z di 18. |
| 19 | md-whiteframe-19dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata da 19px. Aggiunge profondità z di 19. |
| 20 | md-whiteframe-20dp Questo crea un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 20px. Aggiunge profondità z di 20. |
| 21 | md-whiteframe-21dp Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 21px. Aggiunge profondità z di 21. |
| 22 | md-whiteframe-22dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 22px. Aggiunge profondità z di 22. |
| 23 | md-whiteframe-23dp Questo crea un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 23px. Aggiunge una profondità z di 23. |
| 24 | md-whiteframe-24dp Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 24px. Aggiunge una profondità z di 24. |
Esempio
L'esempio seguente mostra l'uso delle classi shadow.
am_whiteframes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.frameContainer md-whiteframe {
background: #fff;
margin: 30px;
height: 100px;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('frameController', frameController);
function frameController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "frameController as ctrl"
layout = "row" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-1dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-2dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-3dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-10dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-15dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-20dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-22dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-23dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-24dp</span>
</md-whiteframe>
</div>
</body>
</html>Risultato
Verifica il risultato.