material
1.2.5
Material Design ist eine Spezifikation für ein einheitliches System aus visuellem, Bewegungs- und Interaktionsdesign, das sich an verschiedene Geräte anpassen lässt. Unser Ziel ist es, einen schlanken, leichten Satz von AngularJS-nativen UI-Elementen bereitzustellen, die die Materialdesignspezifikation für die Verwendung in AngularJS-Single-Page-Anwendungen (SPAs) implementieren.
AngularJS Material ist eine Implementierung der Material Design Specification (2014–2017) von Google für AngularJS-Entwickler (v1.x).
Eine Implementierung der Material Design Specification (2018+) finden Sie im Angular Material-Projekt, das für Angular-Entwickler (v2+) erstellt wurde.
Der Support für AngularJS Material wurde im Januar 2022 offiziell eingestellt. Sehen Sie, was das Ende des Supports bedeutet, und lesen Sie die Ankündigung zum Ende der Lebensdauer. Besuchen Sie material.angular.io für das aktiv unterstützte Angular Material.
Einzelheiten zum Melden von Sicherheitsproblemen finden Sie hier.
AngularJS Material umfasst einen umfangreichen Satz wiederverwendbarer, gut getesteter und zugänglicher UI-Komponenten.
Quicklinks:
Bitte beachten Sie, dass die Verwendung der neuesten Version von AngularJS Material die Verwendung von AngularJS 1.7.2 oder höher erfordert.
AngularJS Material unterstützt die Browserversionen, die im Feld browserslist unserer package.json definiert sind. Erfahren Sie mehr auf unserer Dokumentationsseite.
AngularJS Material unterstützt die hier aufgeführten Screenreader-Versionen.
Entwickler können AngularJS-Material mit NPM und gulp erstellen.
Installieren oder aktualisieren Sie zunächst die npm- Abhängigkeiten Ihres lokalen Projekts:
npm installGulp v3 global installieren:
npm install -g gulp@3Führen Sie dann die Gulp -Aufgaben aus:
# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs Verwenden Sie für die Entwicklung das NPM -Skript docs:watch um es im Entwicklungsmodus auszuführen:
# To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watchWeitere Einzelheiten zur Funktionsweise des Build-Prozesses und zusätzliche Befehle (verfügbar zum Testen und Debuggen) finden Entwickler im Build-Handbuch.
Für Entwickler, die nicht daran interessiert sind, die AngularJS-Materialbibliothek zu erstellen: Verwenden Sie NPM, um die AngularJS-Materialverteilungsdateien zu installieren und zu verwenden.
Wechseln Sie in das Stammverzeichnis Ihres Projekts.
# To get the latest stable version, use NPM from the command line.
npm install angular-material --save
# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --saveBesuchen Sie unser Distributions-Repository für weitere Details zur Installation und Verwendung der AngularJS-Material-Distributionsdateien in Ihrem lokalen Projekt.
CDN-Versionen von AngularJS Material sind verfügbar.
Mit dem Google CDN müssen Sie keine lokalen Kopien der Verteilungsdateien herunterladen. Verweisen Sie stattdessen einfach auf die CDN-URLs, um diese Remote-Bibliotheksdateien problemlos verwenden zu können. Dies ist besonders nützlich, wenn Sie Online-Tools wie CodePen oder Plunker verwenden.
< head >
<!-- AngularJS Material CSS now available via Google CDN; version 1.2.1 used here -->
< link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >
</ head >
< body >
<!-- AngularJS Material Dependencies -->
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " > </ script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " > </ script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " > </ script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " > </ script >
<!-- AngularJS Material Javascript now available via Google CDN; version 1.2.1 used here -->
< script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " > </ script >
</ body >Entwickler, die die neuesten und aktuellsten Build-Versionen suchen, können GitCDN.xyz verwenden, um direkt aus unserem Distributions-Repository abzurufen:
< head >
<!-- AngularJS Material CSS using GitCDN to load directly from `bower-material/master` -->
< link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >
</ head >
< body >
<!-- AngularJS Material Dependencies -->
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " > </ script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " > </ script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " > </ script >
< script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " > </ script >
<!-- AngularJS Material Javascript using GitCDN to load directly from `bower-material/master` -->
< script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " > </ script >
</ body > Sobald Sie alle erforderlichen Assets installiert haben, fügen Sie ngMaterial und ngMessages als Abhängigkeiten für Ihre App hinzu:
angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;
