Winkelmaterial - Kurzanleitung
Angular Material ist eine UI-Komponentenbibliothek für Angular JS-Entwickler. Die wiederverwendbaren UI-Komponenten von Angular Material helfen beim Erstellen attraktiver, konsistenter und funktionaler Webseiten und Webanwendungen, während moderne Webdesign-Prinzipien wie Browser-Portabilität, Geräteunabhängigkeit und ordnungsgemäße Verschlechterung eingehalten werden.
Im Folgenden sind einige herausragende Merkmale von Angular Material aufgeführt:
Eingebautes Responsive Design.
Standard-CSS mit minimalem Platzbedarf.
Enthält neue Versionen gängiger Steuerelemente für Benutzeroberflächen wie Schaltflächen, Kontrollkästchen und Textfelder, die an die Konzepte des Materialdesigns angepasst sind.
Enthält erweiterte und spezielle Funktionen wie Karten, Symbolleiste, Kurzwahl, Seitennavigation, Wischen usw.
Browserübergreifend und kann zum Erstellen wiederverwendbarer Webkomponenten verwendet werden.
Sich anpassendes Design
Angular Material verfügt über ein integriertes Responsive Design, sodass sich die mit Angular Material erstellte Website entsprechend der Gerätegröße neu gestaltet.
Winkelmaterialklassen werden so erstellt, dass die Website für jede Bildschirmgröße geeignet ist.
Die mit Angular Material erstellten Websites sind vollständig kompatibel mit PCs, Tablets und Mobilgeräten.
Erweiterbar
Das eckige Material ist von Natur aus sehr minimal und flach.
Es wurde unter Berücksichtigung der Tatsache entwickelt, dass es viel einfacher ist, neue CSS-Regeln hinzuzufügen, als vorhandene CSS-Regeln zu überschreiben.
Es unterstützt Schatten und kräftige Farben.
Die Farben und Schattierungen bleiben über verschiedene Plattformen und Geräte hinweg einheitlich.
Und vor allem ist Angular Material absolut kostenlos zu verwenden.
Wie verwende ich eckiges Material?
Es gibt zwei Möglichkeiten, Winkelmaterial zu verwenden:
Local Installation - Sie können die Angular Material-Bibliotheken mit npm, jspm oder bower auf Ihren lokalen Computer herunterladen und in Ihren HTML-Code aufnehmen.
CDN Based Version - Sie können die js-Dateien angle-material.min.css und angle-material js direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen.
Lokale Installation
Bevor wir den folgenden Befehl npm verwenden, benötigen wir die NodeJS-Installation auf unserem System. Um Informationen zu Node JS zu erhalten, klicken Sie hier und öffnen Sie die NodeJS-Befehlszeilenschnittstelle. Wir werden den folgenden Befehl verwenden, um Angular Material-Bibliotheken zu installieren.
npm install angular-materialDer obige Befehl generiert die folgende Ausgabe:
[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 lädt die Dateien unter herunter node_modules > angular-materialMappe. Fügen Sie die Dateien wie im folgenden Beispiel erläutert ein -
Beispiel
Jetzt können Sie die CSS- und JS- Datei wie folgt in Ihre HTML-Datei aufnehmen:
<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>Das obige Programm generiert das folgende Ergebnis:
CDN-basierte Version
Sie können die einschließen angular-material.css und angular-material.jsDateien in Ihren HTML-Code direkt aus dem Content Delivery Network (CDN). Google CDN bietet Inhalte für die neueste Version.
In diesem Tutorial verwenden wir die Google CDN-Version der Bibliothek.
Beispiel
Lassen Sie uns nun das obige Beispiel mit neu schreiben angular-material.min.css und angular-material.min.js von 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>Das obige Programm generiert das folgende Ergebnis:
Das md-autocomplete, eine Winkelrichtlinie, wird als spezielles Eingabesteuerelement mit einer integrierten Dropdown-Liste verwendet, um alle möglichen Übereinstimmungen mit einer benutzerdefinierten Abfrage anzuzeigen. Dieses Steuerelement fungiert als Echtzeit-Vorschlagsfeld, sobald der Benutzer in den Eingabebereich eingibt.<md-autocomplete>kann verwendet werden, um Suchergebnisse aus lokalen oder entfernten Datenquellen bereitzustellen. md-autocomplete speichert die Ergebnisse beim Ausführen einer Abfrage zwischen. Nach dem ersten Aufruf werden die zwischengespeicherten Ergebnisse verwendet, um unnötige Serveranforderungen oder Suchlogik zu vermeiden, und es kann deaktiviert werden.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-autocomplete.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | * md-items Ein Ausdruck im Format eines Elements in Elementen, um Übereinstimmungen für Ihre Suche zu durchlaufen. |
| 2 | md-selected-item-change Ein Ausdruck, der jedes Mal ausgeführt wird, wenn ein neues Element ausgewählt wird. |
| 3 | md-search-text-change Ein Ausdruck, der jedes Mal ausgeführt wird, wenn der Suchtext aktualisiert wird. |
| 4 | md-search-text Ein Modell zum Binden des Suchanfragetextes. |
| 5 | md-selected-item Ein Modell, an das das ausgewählte Element gebunden werden soll. |
| 6 | md-item-text Ein Ausdruck, der Ihr Objekt in eine einzelne Zeichenfolge konvertiert. |
| 7 | placeholder Platzhaltertext, der an die Eingabe weitergeleitet wird. |
| 8 | md-no-cache Deaktiviert das interne Caching bei der automatischen Vervollständigung. |
| 9 | ng-disabled Legt fest, ob das Eingabefeld deaktiviert werden soll oder nicht. |
| 10 | md-min-length Gibt die Mindestlänge des Texts an, bevor die automatische Vervollständigung Vorschläge macht. |
| 11 | md-delay Gibt an, wie lange (in Millisekunden) gewartet werden soll, bevor nach Ergebnissen gesucht wird. |
| 12 | md-autofocus Wenn true, wird das Eingabeelement sofort fokussiert. |
| 13 | md-autoselect Wenn true, wird standardmäßig das erste Element ausgewählt. |
| 14 | md-menu-class Dies wird auf das Dropdown-Menü für das Styling angewendet. |
| 15 | md-floating-label Dadurch wird der automatischen Vervollständigung ein schwebendes Etikett hinzugefügt und in den md-input-Container eingeschlossen. |
| 16 | md-input-name Das Namensattribut, das dem Eingabeelement gegeben wird, das mit dem FormController verwendet werden soll. |
| 17 | md-input-id Eine ID, die dem Eingabeelement hinzugefügt werden soll. |
| 18 | md-input-minlength Die Mindestlänge für den Validierungswert der Eingabe. |
| 19 | md-input-maxlength Die maximale Länge für den Validierungswert der Eingabe. |
| 20 | md-select-on-match Wenn diese Option auf "true" gesetzt ist, wählt die automatische Vervollständigung automatisch das genaue Element aus, wenn der Suchtext genau übereinstimmt. |
Beispiel
Das folgende Beispiel zeigt die Verwendung von md-autocomplete Richtlinie und auch die Verwendung von Autocomplete.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das $mdBottomSheet, ein Angular Service, wird zum Öffnen eines unteren Blattes über der Anwendung verwendet und bietet eine einfache Versprechen-API.
| SN | Methode & Beschreibung | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | $mdBottomSheet.show(options); Zeigen Sie ein unteres Blatt mit den angegebenen Optionen an.
|
Beispiel
Das folgende Beispiel zeigt die Verwendung von $mdBottomSheet Service und auch die Verwendung von Bodenplatte.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-card, eine Angular-Direktive, ist eine Container-Direktive und wird zum Zeichnen von Karten in der Angularjs-Anwendung verwendet. In der folgenden Tabelle sind die in md-card verwendeten Winkelanweisungen und Klassen aufgeführt.
| Sr.Nr. | Richtlinie / Klasse & Beschreibung |
|---|---|
| 1 | <md-card-header> Kopfzeile für die Karte, enthält Avatar, Text und quadratisches Bild. |
| 2 | <md-card-avatar> Karten-Avatar. |
| 3 | md-user-avatar Klasse für Benutzerbild. |
| 4 | <md-icon> Icon-Direktive. |
| 5 | <md-card-header-text> Enthält Elemente für die Kartenbeschreibung. |
| 6 | md-title Klasse für den Kartentitel. |
| 7 | md-subhead Klasse für den Kartenunterkopf. |
| 8 | <img> Bild für die Karte. |
| 9 | <md-card-title> Titel des Karteninhalts. |
| 10 | <md-card-title-text> Kartentitel-Textcontainer. |
| 11 | md-headline Klasse für den Titel des Karteninhalts. |
| 12 | md-subhead Klasse für den Unterkopf des Karteninhalts. |
| 13 | <md-card-title-media> Quadratisches Bild innerhalb des Titels. |
| 14 | md-media-sm Klasse für kleines Bild. |
| 15 | md-media-md Klasse für mittleres Bild. |
| 16 | md-media-lg Klasse für großes Bild. |
| 17 | <md-card-content> Karteninhalt. |
| 18 | md-media-xl Klasse für extra großes Bild. |
| 19 | <md-card-actions> Kartenaktionen. |
| 20 | <md-card-icon-actions> Symbolaktionen. |
Beispiel
Das folgende Beispiel zeigt die Verwendung der md-card-Direktive sowie die Verwendung von Kartenklassen.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Angular Material bietet eine umfangreiche Bibliothek mit UI-Widgets. Auf diese Weise können Benutzer erweiterte Interaktionsfunktionen mit der Anwendung nutzen.
In der folgenden Tabelle sind einige wichtige Widgets mit ihrer Beschreibung aufgeführt.
| Sr.Nr. | Widget & Beschreibung |
|---|---|
| 1 | Tasten Das md-button, eine Winkelanweisung, ist eine Schaltflächenanweisung mit optionalen Tintenwellen (und ist standardmäßig aktiviert). Wennhref oder ng-href Wenn ein Attribut bereitgestellt wird, fungiert diese Anweisung als Ankerelement. |
| 2 | Kontrollkästchen Das md-checkbox, eine Winkelrichtlinie, wird als Kontrollkästchen verwendet. |
| 3 | Inhalt Das md-content, eine Winkelrichtlinie, ist ein Containerelement und wird für scrollbaren Inhalt verwendet. Daslayout-padding Attribut kann hinzugefügt werden, um aufgefüllten Inhalt zu haben. |
| 4 | Datumsauswahl Das md-datepicker, eine Winkelrichtlinie, ist eine Eingabesteuerung zur Auswahl eines Datums. Es unterstützt auch ngMessages für die Eingabevalidierung. |
| 5 | Dialoge Das md-dialog, eine Winkelrichtlinie, ist ein Containerelement und wird zum Anzeigen eines Dialogfelds verwendet. Sein Elementmd-dialog-content enthält den Inhalt des Dialogs und der md-dialog-actions ist verantwortlich für Dialogaktionen. Das mdDialog, ein Angular Service, öffnet einen Dialog über die Anwendung, um die Benutzer auf dem Laufenden zu halten und ihnen zu helfen, Entscheidungen zu treffen. |
| 6 | Teiler Das md-divider, eine Winkelrichtlinie, ist ein Regelelement und wird verwendet, um eine dünne, einfache Regel anzuzeigen, mit der Inhalte in Listen und Seitenlayouts gruppiert und aufgeteilt werden können. |
| 7 | Liste Das md-list, eine Angular-Direktive, ist eine Containerkomponente, die Folgendes enthält md-list-itemElemente als Kinder. Die Direktive md-list-item ist eine Containerkomponente für Zeilenelemente des Containers md-list. CSS-Klassenmd-2-line und md-3-line kann zu md-list-item hinzugefügt werden, um die Zeilenhöhe um 22px bzw. 40px zu erhöhen. |
| 8 | Speisekarte Das md-menu, eine Angular-Direktive, ist eine Komponente zum Anzeigen von Zusatzoptionen im Kontext der ausgeführten Aktion. Dasmd-menuhat zwei untergeordnete Elemente. Das erste Element ist dastrigger elementund wird verwendet, um das Menü zu öffnen. Das zweite Element ist dasmd-menu-contentum den Inhalt des Menüs darzustellen, wenn das Menü geöffnet wird. Der md-Menüinhalt trägt normalerweise die Menüpunkte als md-Menüpunkt. |
| 9 | Menüleiste Das md-menu-barist eine Containerkomponente für mehrere Menüs. Die Menüleiste hilft beim Erstellen eines vom Betriebssystem bereitgestellten Menüeffekts. |
| 10 | Fortschrittsbalken Das md-progress-circular und md-progress-linear sind Angular Progress-Anweisungen und werden verwendet, um die Nachricht zum Laden von Inhalten in der Anwendung anzuzeigen. |
| 11 | Radio Knöpfe Das md-radio-group und md-radio-buttonWinkelanweisungen werden verwendet, um Optionsfelder in der Anwendung anzuzeigen. Die md-Optionsgruppe ist der Gruppierungscontainer für md-Optionsfeldelemente. |
| 12 | Wählt aus Das md-selectwird eine Angular-Direktive verwendet, um das Auswahlfeld anzuzeigen, das durch das ng-Modell begrenzt ist. |
| 13 | Fab Symbolleisten Das md-fab-toolbar, eine Angular-Direktive, wird verwendet, um eine Symbolleiste mit Elementen oder Schaltflächen für den schnellen Zugriff auf allgemeine Aktionen anzuzeigen. |
| 14 | Schieberegler Das md-sliderwird eine Angular-Direktive verwendet, um eine Bereichskomponente anzuzeigen. Es hat zwei Modi -
|
| 15 | Tabs Das md-tabs und md-tabWinkelanweisungen werden verwendet, um Registerkarten in der Anwendung anzuzeigen. md-tabs ist der Gruppierungscontainer für md-tab-Elemente. |
| 16 | Symbolleisten Das md-toolbarEine Angular-Direktive wird verwendet, um eine Symbolleiste anzuzeigen, die normalerweise ein Bereich über dem Inhalt ist, um den Titel und die entsprechenden Schaltflächen anzuzeigen. |
| 17 | Tooltips Das Angular Material bietet verschiedene spezielle Methoden, um den Benutzern unauffällige QuickInfos anzuzeigen. Angular Material bietet Möglichkeiten, ihnen Anweisungen zuzuweisen, und die Anweisung md-tooltip wird zum Anzeigen von QuickInfos verwendet. Ein Tooltip wird immer dann aktiviert, wenn der Benutzer die übergeordnete Komponente fokussiert, mit der Maus darüber fährt oder sie berührt. |
| 18 | Chips Das md-chipsEine Winkelrichtlinie wird als spezielle Komponente verwendet, die als Chip bezeichnet wird. Sie kann verwendet werden, um kleine Informationen darzustellen, z. B. einen Kontakt, Tags usw. Benutzerdefinierte Vorlagen können zum Rendern des Inhalts eines Chips verwendet werden. Dies kann erreicht werden, indem ein MD-Chip-Template-Element mit dem benutzerdefinierten Inhalt als untergeordnetes Element von MD-Chips angegeben wird. |
| 19 | Kontaktchips Das md-contact-chips, eine Winkelrichtlinie, ist eine Eingabesteuerung, die auf md-Chips basiert und die verwendet md-autocompleteElement. Die Kontaktchipkomponente akzeptiert einen Abfrageausdruck, der eine Liste möglicher Kontakte zurückgibt. Ein Benutzer kann einen davon auswählen und zur Liste der verfügbaren Chips hinzufügen. |
Layout-Richtlinie
Die Layoutanweisung für ein Containerelement wird verwendet, um die Layoutrichtung für seine untergeordneten Elemente anzugeben. Es folgen die zuweisbaren Werte für die Layoutrichtlinie -
row - Artikel werden horizontal mit maximaler Höhe = 100% angeordnet und maximale Breite ist die Breite der Artikel im Container.
column - Artikel werden vertikal mit maximaler Breite = 100% angeordnet und maximale Höhe ist die Höhe der Artikel im Container.
Für ein ansprechendes Design wie das Layout, das abhängig von der Bildschirmgröße des Geräts automatisch geändert wird, können die in der folgenden Tabelle aufgeführten Layout-APIs verwendet werden, um die Layoutrichtung für Geräte mit Ansichtsbreiten festzulegen.
| Sr.Nr. | API- und Gerätebreite, wenn der Haltepunkt die Standardeinstellung überschreibt |
|---|---|
| 1 | layout Legt die Standardlayoutrichtung fest, sofern sie nicht von einem anderen Haltepunkt überschrieben wird. |
| 2 | layout-xs Breite <600px |
| 3 | layout-gt-xs Breite> = 600px |
| 4 | layout-sm 600px <= Breite <960px |
| 5 | layout-gt-sm Breite> = 960px |
| 6 | layout-md 960px <= width <1280px |
| 7 | layout-gt-md Breite> = 1280px |
| 8 | layout-lg 1280px <= width <1920px |
| 9 | layout-gt-lg Breite> = 1920px |
| 10 | layout-xl Breite> = 1920px |
Beispiel
Das folgende Beispiel zeigt die Verwendung der Layout-Direktive sowie die Verwendung des Layouts.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Flex-Richtlinie
Die Flex-Direktive für ein Containerelement wird verwendet, um die Größe und Position der Elemente anzupassen. Es definiert, wie das Element seine Größe in Bezug auf seinen übergeordneten Container und die anderen Elemente im Container anpassen soll. Es folgen die zuweisbaren Werte für die Flex-Direktive -
multiples of 5 - 5, 10, 15 ... 100
33 - 33%
66 - 66%
Beispiel
Das folgende Beispiel zeigt die Verwendung der Flex-Direktive sowie die Verwendung von 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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-input-container, eine Angular-Direktive, ist eine Containerkomponente, die eine beliebige enthält <input> oder <textarea>Element als Kind. Es unterstützt auch die Fehlerbehandlung mithilfe der Standardanweisungen ng-messages und animiert die Nachrichten mithilfe der Ereignisse ngEnter / ngLeave oder ngShow / ngHide.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute des aufgeführt md-input-container.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | md-maxlength Die maximal zulässige Anzahl von Zeichen in dieser Eingabe. Wenn dies angegeben ist, wird unter der Eingabe ein Zeichenzähler angezeigt. Der Zweck der md-maxlength besteht darin, den Zählertext für die maximale Länge anzuzeigen. Wenn Sie den Zählertext nicht möchten und nur eine "einfache" Validierung benötigen, können Sie die Attribute "einfache" ng-maxlength oder maxlength verwenden. |
| 2 | aria-label Ein Arienetikett ist erforderlich, wenn kein Etikett vorhanden ist. Eine Warnmeldung wird in der Konsole protokolliert, wenn kein Etikett vorhanden ist. |
| 3 | placeholder Ein alternativer Ansatz zur Verwendung von Aria-Label, wenn das Label nicht vorhanden ist. Der Platzhaltertext wird in das Attribut aria-label kopiert. |
| 4 | md-no-autogrow Wenn vorhanden, wachsen die Textbereiche nicht automatisch. |
| 5 | md-detect-hidden Wenn vorhanden, werden die Textbereiche richtig dimensioniert, wenn sie nach dem Ausblenden aufgedeckt werden. Dies ist aus Leistungsgründen standardmäßig deaktiviert, da bei jedem Digest-Zyklus ein Reflow garantiert wird. |
Beispiel
Das folgende Beispiel zeigt die Verwendung der Direktive md-input-container sowie die Verwendung von Eingaben.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-icon, eine Angular-Direktive, ist eine Komponente zum Anzeigen vektorbasierter Symbole in der Anwendung. Neben der Verwendung der Google Material Icons werden auch Symbolschriftarten und SVG-Symbole unterstützt.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-icon.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | * md-font-icon Dies ist der Zeichenfolgenname des CSS-Symbols, das der Schriftart zugeordnet ist und zum Rendern des Symbols verwendet wird. Erfordert das Vorladen der Schriftarten und der genannten CSS-Stile. |
| 2 | * md-font-set Dies ist der CSS-Stilname, der der Schriftartenbibliothek zugeordnet ist und als Klasse für die Schriftart-Symbol-Ligatur zugewiesen wird. Dieser Wert kann auch ein Alias sein, der zum Nachschlagen des Klassennamens verwendet wird. Verwenden Sie intern $ mdIconProvider.fontSet (<Alias>), um den Stilnamen zu bestimmen. |
| 3 | * md-svg-src Dies ist die String-URL (oder der Ausdruck), die zum Laden, Zwischenspeichern und Anzeigen einer externen SVG-Datei verwendet wird. |
| 4 | * md-svg-icon Dies ist der Zeichenfolgenname, der zum Nachschlagen des Symbols aus dem internen Cache verwendet wird. Es können auch interpolierte Zeichenfolgen oder Ausdrücke verwendet werden. Bestimmte Satznamen können mit der Syntax <Satzname>: <Symbolname> verwendet werden. Um Symbolsätze verwenden zu können, müssen Entwickler die Sätze mithilfe des Dienstes $ mdIconProvider vorregistrieren. |
| 5 | aria-label Dieses Beschriftungssymbol dient der Barrierefreiheit. Wenn eine leere Zeichenfolge angegeben wird, wird das Symbol mit aria-hidden = "true" vor der Eingabehilfenebene ausgeblendet. Wenn das Symbol weder eine Arienbeschriftung noch eine Beschriftung des übergeordneten Elements enthält, wird eine Warnung an der Konsole protokolliert. |
| 6 | alt Dieses Beschriftungssymbol dient der Barrierefreiheit. Wenn eine leere Zeichenfolge angegeben wird, wird das Symbol mit aria-hidden = "true" vor der Eingabehilfenebene ausgeblendet. Wenn das Symbol weder eine Alt noch eine Beschriftung des übergeordneten Elements enthält, wird eine Warnung an der Konsole protokolliert. |
Beispiel
Das folgende Beispiel zeigt die Verwendung der Direktive md-icons sowie die Verwendung von Symbolen.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-grid-list, eine Angular-Direktive, ist eine Komponente zum Anlegen von Inhalten für unterschiedliche Bildschirmgrößen. Ein Raster enthält 12 Spalten im Bildschirm für die Desktopgröße, 8 im Bildschirm für die Tablet-Größe und 4 Spalten im Bildschirm für die Telefongröße, wobei jede Größe vordefinierte Ränder und Rinnen aufweist. Die Zellen werden nacheinander in der Reihenfolge angeordnet, in der sie definiert sind.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-grid-list.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | * md-cols Dies ist für die Anzahl der Spalten im Raster. |
| 2 | * md-row-height Einer von
|
| 3 | md-gutter Der Abstand zwischen Kacheln in CSS-Einheiten (Standard 1 Pixel). |
| 4 | md-on-layout Ausdruck, der nach dem Layout ausgewertet werden soll. Das Ereignisobjekt ist als $ event verfügbar und enthält Leistungsinformationen. |
Beispiel
Das folgende Beispiel zeigt die Verwendung von md-grid-list Richtlinie und auch die Verwendung von Gitter.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Ändern Sie die Größe des Bildschirms, um den Effekt zu sehen.
Das md-sidenavEine Angular-Direktive wird verwendet, um eine Containerkomponente anzuzeigen, die programmgesteuert angezeigt oder ausgeblendet werden kann. Es wird standardmäßig über den Hauptinhaltsbereich verschoben.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-sidenav
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | md-is-open Ein Modell, das daran gebunden ist, ob das Sidav geöffnet ist. |
| 2 | md-component-id componentId zur Verwendung mit dem Dienst $ mdSidenav. |
| 3 | md-is-locked-open Wenn dieser Ausdruck zu true ausgewertet wird, wird das Sidenav "geöffnet": Es fällt in den Fluss des Inhalts, anstatt darüber zu erscheinen. Dies überschreibt das Attribut is-open. Der Dienst $ mdMedia () ist dem Attribut is -locked-open ausgesetzt, dem eine Medienabfrage oder eine der Voreinstellungen sm, gt-sm, md, gt-md, lg oder gt-lg zugewiesen werden kann. Examples - - |
Beispiel
Das folgende Beispiel zeigt die Verwendung von md-sidenav und auch die Verwendung der sidenav Komponente.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-fab-speed-dial, eine Angular-Direktive, wird verwendet, um eine Reihe von Popup-Elementen oder Schaltflächen für den schnellen Zugriff auf allgemeine Aktionen anzuzeigen.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-fab-speed-dial.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | * md-direction Dies bestimmt die Richtung, in der die Kurzwahl relativ zum Triggerelement erscheinen soll. |
| 2 | md-open Auf diese Weise können Sie programmgesteuert steuern, ob die Kurzwahl sichtbar ist oder nicht. |
Beispiel
Das folgende Beispiel zeigt die Verwendung der Direktive md-fab-speed-dial sowie die Verwendung der Kurzwahl.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-subheader, eine Angular-Direktive, wird verwendet, um einen Subheader für einen Abschnitt anzuzeigen.
Beispiel
Das folgende Beispiel zeigt die Verwendung von md-subheader sowie die Verwendung von subheader-Komponenten.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Die Swipe-Funktion ist für mobile Geräte gedacht. Die folgenden Anweisungen werden zum Behandeln von Wischbewegungen verwendet.
md-swipe-downwird eine Angular-Direktive verwendet, um benutzerdefiniertes Verhalten anzugeben, wenn ein Element nach unten gewischt wird.
md-swipe-leftwird eine Angular-Direktive verwendet, um benutzerdefiniertes Verhalten anzugeben, wenn ein Element nach links gewischt wird.
md-swipe-rightwird eine Angular-Direktive verwendet, um benutzerdefiniertes Verhalten anzugeben, wenn ein Element nach rechts gewischt wird.
md-swipe-upwird eine Angular-Direktive verwendet, um benutzerdefiniertes Verhalten anzugeben, wenn ein Element nach oben gewischt wird.
Beispiel
Das folgende Beispiel zeigt die Verwendung von md-swipe- * sowie die Verwendung von Swipe-Komponenten.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-switch, eine Angular-Direktive, wird verwendet, um einen Schalter anzuzeigen.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-switch.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | * ng-model Der zuweisbare Winkelausdruck, an den Daten gebunden werden sollen. |
| 2 | name Der Eigenschaftsname des Formulars, unter dem das Steuerelement veröffentlicht wird. |
| 3 | ng-true-value Der Wert, auf den der Ausdruck bei Auswahl festgelegt werden soll. |
| 4 | ng-false-value Der Wert, auf den der Ausdruck gesetzt werden soll, wenn er nicht ausgewählt ist. |
| 5 | ng-change Der Winkelausdruck, der ausgeführt werden soll, wenn sich die Eingabe aufgrund der Benutzerinteraktion mit dem Eingabeelement ändert. |
| 6 | ng-disabled Aktivieren / Deaktivieren basierend auf dem Ausdruck. |
| 7 | md-no-ink Die Verwendung von Attributen gibt die Verwendung von Welligkeitstinteneffekten an. |
| 8 | aria-label Dadurch wird die Tastenbezeichnung veröffentlicht, die von den Screenreadern für die Barrierefreiheit verwendet wird. Dies ist standardmäßig der Text des Schalters. |
Beispiel
Das folgende Beispiel zeigt die Verwendung von md-swipe- * sowie die Verwendung von Swipe-Komponenten.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Die Angular Material-Komponenten verwenden die Intentionsgruppenklassen wie md-primary, md-akzent, md-warn und zusätzliche Klassen für Farbunterschiede wie md-hue-1, md-hue-2 oder md-hue-3. Die folgenden Komponenten unterstützen die Verwendung der oben genannten Klassen.
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
Designs können während der Anwendungskonfiguration mit $ mdThemingProvider konfiguriert werden. Die folgenden Eigenschaften können verwendet werden, um verschiedene Farbpaletten zuzuweisen.
- primaryPalette
- accentPalette
- warnPalette
- backgroundPalette
Beispiel
Das folgende Beispiel zeigt die Verwendung von Themen in der Angular JS-Anwendung.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das Angular Material bietet verschiedene spezielle Methoden, um den Benutzern unauffällige Warnungen anzuzeigen. Es bietet auch einen Begriff Toast für sie. Der Dienst $ mdToast wird zum Anzeigen von Toasts verwendet.
Beispiel
Das folgende Beispiel zeigt die Verwendung von 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>Ergebnis
Überprüfen Sie das Ergebnis.
Angular Material bietet verschiedene Typografie-CSS-Klassen, mit denen visuelle Konsistenz in der Angular JS-Anwendung hergestellt werden kann.
In der folgenden Tabelle sind die verschiedenen Klassen mit ihrer Beschreibung aufgeführt.
| Sr.Nr. | Klassenname & Beschreibung |
|---|---|
| 1 | md-display-1 Zeigt den Text mit Regular 34px an. |
| 2 | md-display-2 Zeigt den Text mit Regular 45px an. |
| 3 | md-display-3 Zeigt den Text mit Regular 56px an. |
| 4 | md-display-4 Zeigt den Text mit Light 112px an. |
| 5 | md-headline Zeigt den Text mit Regular 24px an. |
| 6 | md-title Zeigt den Text mit Medium 20px an. |
| 7 | md-subhead Zeigt den Text mit Regular 16px an. |
| 8 | md-body-1 Zeigt den Text mit Regular 14px an. |
| 9 | md-body-2 Zeigt den Text mit Medium 14px an. |
| 10 | md-button Zeigt die Schaltfläche mit Medium 14px an. |
| 11 | md-caption Zeigt den Text mit Regular 12px an. |
Beispiel
Das folgende Beispiel zeigt die Verwendung von Typografie-CSS-Klassen.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Das md-virtual-repeat-container ist der Bildlaufcontainer für die Komponente md-virtual-repeat.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-virtual-repeat-container.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | md-top-index Bindet den Index des Elements oben im Bildlaufcontainer an $ scope. Es kann die Bildlaufposition sowohl lesen als auch einstellen. |
| 2 | md-orient-horizontal Legt fest, ob der Container horizontal scrollen soll (standardmäßig Ausrichtung und vertikales Scrollen). |
| 3 | md-auto-shrink Wenn vorhanden, wird der Behälter verkleinert, um der Anzahl der Elemente zu entsprechen, wenn diese Anzahl unter seiner ursprünglichen Größe liegt. |
| 4 | md-auto-shrink-min Minimale Anzahl von Elementen, auf die md-auto-shrink verkleinert wird (Standard: 0). |
md-virtual-repeat
Die virtuelle Wiederholung ist ein Ersatz für ng-repeat, um nur genügend HTML-Elemente zu rendern, um den Container zu füllen und sie beim Scrollen des Benutzers wiederzuverwenden.
Attribute
In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-virtual-repeat.
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | md-item-size Die Höhe oder Breite der wiederholten Elemente (die für jedes Element identisch sein müssen). Dies ist optional. Dies versucht, die Größe aus dem Dom zu lesen, wenn sie fehlt, setzt jedoch voraus, dass alle wiederholten Knoten dieselbe Höhe oder Breite haben. |
| 2 | md-extra-name Wertet einen zusätzlichen Namen aus, dem das aktuell iterierte Element im wiederholten Bereich zugewiesen werden kann (erforderlich für die Verwendung in md-autocomplete). |
| 3 | md-on-demand Wenn vorhanden, behandelt die md-virtual-repeat Argument als Objekt, das Zeilen anstelle eines Arrays abrufen kann. Dieses Objekt muss die folgende Schnittstelle mit zwei (2) Methoden implementieren:
|
Beispiel
Das folgende Beispiel zeigt die Verwendung der virtuellen Wiederholung.
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>Ergebnis
Überprüfen Sie das Ergebnis.
Angular Material hat mehrere spezielle Klassen, um Behälter als papierähnliche Karten mit Schatten anzuzeigen.
In der folgenden Tabelle sind die verschiedenen Klassen mit ihrer Beschreibung aufgeführt.
| Sr.Nr. | Klassenname & Beschreibung |
|---|---|
| 1 | md-whiteframe-1dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem umrandeten Schatten von 1 Pixel formatiert. Fügt eine Tiefe von 1 hinzu. |
| 2 | md-whiteframe-2dp Dadurch wird ein Container für jeden HTML-Inhalt mit 2px-Schatten umrandet. Fügt eine Tiefe von 2 hinzu. |
| 3 | md-whiteframe-3dp Dadurch wird ein Container für jeden HTML-Inhalt mit 3px-Schatten umrandet. Fügt eine Tiefe von 3 hinzu. |
| 4 | md-whiteframe-4dp Dadurch wird ein Container für jeden HTML-Inhalt mit 4px-Schatten umrandet. Fügt eine Tiefe von 4 hinzu. |
| 5 | md-whiteframe-5dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 5-Pixel-Schatten umrandet. Fügt eine Tiefe von 5 hinzu. |
| 6 | md-whiteframe-6dp Dadurch wird ein Container für jeden HTML-Inhalt mit 6px-Schatten umrandet. Fügt eine Tiefe von 6 hinzu. |
| 7 | md-whiteframe-7dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 7px-Schatten umrandet. Fügt eine Tiefe von 7 hinzu. |
| 8 | md-whiteframe-8dp Dadurch wird ein Container für jeden HTML-Inhalt mit 8px-Schatten umrandet. Fügt eine Tiefe von 8 hinzu. |
| 9 | md-whiteframe-9dp Dadurch wird ein Container für jeden HTML-Inhalt mit 9px-Schatten gestaltet. Fügt eine Tiefe von 9 hinzu. |
| 10 | md-whiteframe-10dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 10-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 10 hinzu. |
| 11 | md-whiteframe-11dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 11-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 11 hinzu. |
| 12 | md-whiteframe-12dp Dadurch wird ein Container für jeden HTML-Inhalt mit 12px-Rahmenschatten formatiert. Fügt eine Z-Tiefe von 12 hinzu. |
| 13 | md-whiteframe-13dp Dadurch wird ein Container für jeden HTML-Inhalt mit 13px-Schatten umrandet. Fügt eine Z-Tiefe von 13 hinzu. |
| 14 | md-whiteframe-14dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 14px großen Schatten formatiert. Fügt eine Z-Tiefe von 14 hinzu. |
| 15 | md-whiteframe-15dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem umrandeten Schatten von 15 Pixel formatiert. Fügt eine Z-Tiefe von 15 hinzu. |
| 16 | md-whiteframe-16dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 16-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 16 hinzu. |
| 17 | md-whiteframe-17dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 17-Pixel-Rahmenschatten formatiert. Fügt eine Z-Tiefe von 17 hinzu. |
| 18 | md-whiteframe-18dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 18-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 18 hinzu. |
| 19 | md-whiteframe-19dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 19px-Rahmenschatten formatiert. Fügt eine Z-Tiefe von 19 hinzu. |
| 20 | md-whiteframe-20dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 20-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 20 hinzu. |
| 21 | md-whiteframe-21dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 21-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 21 hinzu. |
| 22 | md-whiteframe-22dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 22-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 22 hinzu. |
| 23 | md-whiteframe-23dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 23px großen Schatten formatiert. Fügt eine Z-Tiefe von 23 hinzu. |
| 24 | md-whiteframe-24dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 24-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 24 hinzu. |
Beispiel
Das folgende Beispiel zeigt die Verwendung von Schattenklassen.
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>Ergebnis
Überprüfen Sie das Ergebnis.