Material Design — это спецификация единой системы визуального, динамического и интерактивного дизайна, которая адаптируется к различным устройствам. Наша цель — предоставить простой и легкий набор элементов пользовательского интерфейса, родных для AngularJS, которые реализуют спецификацию Material Design для использования в одностраничных приложениях AngularJS (SPA).
AngularJS Material — это реализация спецификации Google Material Design (2014–2017) для разработчиков AngularJS (v1.x).
Информацию о реализации спецификации Material Design (2018+) см. в проекте Angular Material, созданном для разработчиков Angular (v2+).
Поддержка AngularJS Material официально прекращена в январе 2022 года. Узнайте, что означает прекращение поддержки, и прочитайте объявление об окончании срока службы. Посетите материал.angular.io, чтобы узнать об активно поддерживаемом Angular Material.
Подробную информацию о том, как сообщать о проблемах безопасности, можно найти здесь.
AngularJS Material включает в себя богатый набор многократно используемых, хорошо протестированных и доступных компонентов пользовательского интерфейса.
Быстрые ссылки:
Обратите внимание, что для использования последней версии AngularJS Material требуется AngularJS 1.7.2 или выше.
AngularJS Material поддерживает версии браузеров, определенные в поле browserslist
нашего package.json. Узнайте больше на нашем сайте документации.
AngularJS Material поддерживает перечисленные здесь версии программ чтения с экрана.
Разработчики могут создавать материалы AngularJS, используя NPM и gulp.
Сначала установите или обновите зависимости npm вашего локального проекта:
npm install
Установите Gulp v3 глобально:
npm install -g gulp@3
Затем запустите задачи gulp :
# 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
Для разработки используйте скрипт docs:watch
NPM для запуска в режиме разработки:
# To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch
Для получения более подробной информации о том, как работает процесс сборки, а также о дополнительных командах (доступных для тестирования и отладки), разработчикам следует прочитать Руководство по сборке.
Для разработчиков, не заинтересованных в создании библиотеки материалов AngularJS... используйте NPM для установки и использования файлов распространения материалов AngularJS.
Перейдите в корневой каталог вашего проекта.
# 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 --save
Посетите наш репозиторий дистрибутива для получения более подробной информации о том, как установить и использовать файлы дистрибутива AngularJS Material в вашем локальном проекте.
Доступны CDN-версии AngularJS Material.
Благодаря Google CDN вам не нужно будет загружать локальные копии файлов дистрибутива. Вместо этого просто укажите URL-адреса CDN, чтобы легко использовать файлы удаленной библиотеки. Это особенно полезно при использовании онлайн-инструментов, таких как CodePen или Plunker.
< head >
< link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >
head >
< body >
< 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 >
< script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " > script >
body >
Разработчики, которым нужны самые последние версии сборок, могут использовать GitCDN.xyz для получения непосредственно из нашего репозитория дистрибутива:
< head >
< link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >
head >
< body >
< 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 >
< script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " > script >
body >
После установки всех необходимых ресурсов добавьте ngMaterial
и ngMessages
в качестве зависимостей для вашего приложения:
angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;