Угловой Материал — Обзор
Angular Material — это библиотека компонентов пользовательского интерфейса для разработчиков Angular JS. Многократно используемые компоненты пользовательского интерфейса Angular Material помогают создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, придерживаясь современных принципов веб-дизайна, таких как переносимость браузера, независимость от устройства и постепенная деградация.
Ниже приведены несколько характерных особенностей углового материала —
-
Встроенное адаптивное проектирование.
-
Стандартный CSS с минимальной площадью.
-
Включает в себя новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями дизайна материалов.
-
Включает расширенные и специализированные функции, такие как карты, панель инструментов, быстрый набор, боковая навигация, пролистывание и т. Д.
-
Кросс-браузер, и может быть использован для создания веб-компонентов многократного использования.
Встроенное адаптивное проектирование.
Стандартный CSS с минимальной площадью.
Включает в себя новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями дизайна материалов.
Включает расширенные и специализированные функции, такие как карты, панель инструментов, быстрый набор, боковая навигация, пролистывание и т. Д.
Кросс-браузер, и может быть использован для создания веб-компонентов многократного использования.
Адаптивный дизайн
-
Angular Material имеет встроенную адаптивную конструкцию, поэтому веб-сайт, созданный с использованием Angular Material, будет переделываться в соответствии с размером устройства.
-
Классы Angular Material созданы таким образом, что сайт может соответствовать любому размеру экрана.
-
Веб-сайты, созданные с использованием Angular Material, полностью совместимы с ПК, планшетами и мобильными устройствами.
Angular Material имеет встроенную адаптивную конструкцию, поэтому веб-сайт, созданный с использованием Angular Material, будет переделываться в соответствии с размером устройства.
Классы Angular Material созданы таким образом, что сайт может соответствовать любому размеру экрана.
Веб-сайты, созданные с использованием Angular Material, полностью совместимы с ПК, планшетами и мобильными устройствами.
растяжимый
-
Угловой материал по дизайну очень минимальный и плоский.
-
Он разработан с учетом того факта, что добавлять новые правила CSS намного проще, чем перезаписывать существующие правила CSS.
-
Поддерживает тени и жирные цвета.
-
Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.
Угловой материал по дизайну очень минимальный и плоский.
Он разработан с учетом того факта, что добавлять новые правила CSS намного проще, чем перезаписывать существующие правила CSS.
Поддерживает тени и жирные цвета.
Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.
И самое главное, Angular Material абсолютно бесплатен в использовании.
Угловой материал — настройка среды
Как использовать угловой материал?
Есть два способа использовать угловой материал —
-
Локальная установка. Вы можете загрузить библиотеки Angular Material, используя npm, jspm или bower, на свой локальный компьютер и включить их в свой HTML-код.
-
Версия на основе CDN. Вы можете включать файлы js angular-material.min.css и angular-material в свой HTML-код непосредственно из сети доставки контента (CDN).
Локальная установка. Вы можете загрузить библиотеки Angular Material, используя npm, jspm или bower, на свой локальный компьютер и включить их в свой HTML-код.
Версия на основе CDN. Вы можете включать файлы js angular-material.min.css и angular-material в свой HTML-код непосредственно из сети доставки контента (CDN).
Локальная установка
Прежде чем мы используем следующую команду npm, нам требуется установка NodeJS в нашей системе. Чтобы получить информацию об узле JS, нажмите здесь и откройте интерфейс командной строки NodeJS. Мы будем использовать следующую команду для установки библиотек Angular Material.
npm установить угловой материал
Приведенная выше команда сгенерирует следующий вывод:
[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-material
npm загрузит файлы в папку node_modules> angular-material . Включите файлы, как описано в следующем примере —
пример
Теперь вы можете включить файлы CSS и JS в ваш HTML-файл следующим образом:
<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>
Вышеуказанная программа сгенерирует следующий результат —
CDN основанная версия
Вы можете включить файлы angular-material.css и angular-material.js в свой HTML-код непосредственно из сети доставки контента (CDN). Google CDN предоставляет контент для последней версии.
В этом руководстве мы используем версию библиотеки Google CDN.
пример
Теперь давайте перепишем приведенный выше пример, используя angular-material.min.css и angular-material.min.js из 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>
Вышеуказанная программа сгенерирует следующий результат —
Угловой материал — автозаполнение
Md-autocomplete , угловая директива, используется в качестве специального элемента управления вводом со встроенным раскрывающимся списком, чтобы показать все возможные совпадения с пользовательским запросом. Этот элемент управления действует как окно для подсказок в реальном времени, как только пользователь вводит данные в области ввода. <md-autocomplete> может использоваться для предоставления результатов поиска из локальных или удаленных источников данных. md-autocomplete кэширует результаты при выполнении запроса. После первого вызова он использует кэшированные результаты для устранения ненужных запросов к серверу или логики поиска и может быть отключен.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-autocomplete .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
* MD-предметы Выражение в формате элемента в элементах для перебора совпадений для вашего поиска. |
| 2 |
мкр-выбрано пункт-замена Выражение, запускаемое при каждом выборе нового элемента. |
| 3 |
мкр-поиск-текст изменения Выражение, которое будет запускаться каждый раз, когда текст поиска обновляется. |
| 4 |
мкр-поиск-текст Модель для привязки текста поискового запроса. |
| 5 |
мкр-выбран пункт- Модель для привязки выбранного элемента. |
| 6 |
мкр-элемент-текст Выражение, которое преобразует ваш объект в одну строку. |
| 7 |
заполнитель Заполнитель текста, который будет перенаправлен на вход. |
| 8 |
не мкр-не-кэша Отключает внутреннее кэширование, которое происходит при автозаполнении. |
| 9 |
нг-инвалидов Определяет, следует ли отключить поле ввода. |
| 10 |
мкр-мин Длина Определяет минимальную длину текста, прежде чем автозаполнение сделает предложения. |
| 11 |
мкр-задержка Задает время ожидания (в миллисекундах) перед поиском результатов. |
| 12 |
мкр-автофокусировка Если true, сразу же будет сфокусирован элемент ввода. |
| 13 |
мкр-автовыбор Если true, первый элемент будет выбран по умолчанию. |
| 14 |
мкр-меню класса Это будет применено к выпадающему меню для стилизации. |
| 15 |
мкр-плавающая этикетка Это добавит плавающую метку для автозаполнения и поместит ее в контейнер md-input-container. |
| 16 |
-ввода имя-мкр Атрибут имени, данный элементу ввода для использования с FormController. |
| 17 |
мкр-вход-идентификатор Идентификатор, который будет добавлен к элементу ввода. |
| 18 |
мкр-вход-MinLength Минимальная длина значения ввода для проверки. |
| 19 |
мкр-вход-MaxLength Максимальная длина значения ввода для проверки. |
| 20 |
мкр-выбрать-на-матч Если установлено значение true, автозаполнение будет автоматически выбирать точный элемент, если текст поиска является точным соответствием. |
* MD-предметы
Выражение в формате элемента в элементах для перебора совпадений для вашего поиска.
мкр-выбрано пункт-замена
Выражение, запускаемое при каждом выборе нового элемента.
мкр-поиск-текст изменения
Выражение, которое будет запускаться каждый раз, когда текст поиска обновляется.
мкр-поиск-текст
Модель для привязки текста поискового запроса.
мкр-выбран пункт-
Модель для привязки выбранного элемента.
мкр-элемент-текст
Выражение, которое преобразует ваш объект в одну строку.
заполнитель
Заполнитель текста, который будет перенаправлен на вход.
не мкр-не-кэша
Отключает внутреннее кэширование, которое происходит при автозаполнении.
нг-инвалидов
Определяет, следует ли отключить поле ввода.
мкр-мин Длина
Определяет минимальную длину текста, прежде чем автозаполнение сделает предложения.
мкр-задержка
Задает время ожидания (в миллисекундах) перед поиском результатов.
мкр-автофокусировка
Если true, сразу же будет сфокусирован элемент ввода.
мкр-автовыбор
Если true, первый элемент будет выбран по умолчанию.
мкр-меню класса
Это будет применено к выпадающему меню для стилизации.
мкр-плавающая этикетка
Это добавит плавающую метку для автозаполнения и поместит ее в контейнер md-input-container.
-ввода имя-мкр
Атрибут имени, данный элементу ввода для использования с FormController.
мкр-вход-идентификатор
Идентификатор, который будет добавлен к элементу ввода.
мкр-вход-MinLength
Минимальная длина значения ввода для проверки.
мкр-вход-MaxLength
Максимальная длина значения ввода для проверки.
мкр-выбрать-на-матч
Если установлено значение true, автозаполнение будет автоматически выбирать точный элемент, если текст поиска является точным соответствием.
пример
В следующем примере показано использование директивы md-autocomplete, а также использование 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>
Результат
Проверьте результат.
Угловой материал — нижний лист
$ MdBottomSheet , Angular Service, используется для открытия нижнего листа над приложением и предоставляет простой API обещаний.
| SN | Метод и описание | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 |
$ mdBottomSheet.show (варианты); Показать нижний лист с указанными опциями.
|
$ mdBottomSheet.show (варианты);
Показать нижний лист с указанными опциями.
* опции
Объект параметров со следующими свойствами:
templateUrl — {string =} — URL-адрес файла шаблона html, который будет использоваться в качестве содержимого нижнего листа. Ограничения: шаблон должен иметь внешний элемент md-bottom-sheet.
template — {string =} — То же, что templateUrl, за исключением того, что это фактическая строка шаблона.
scope — {object =} — Область действия, к которой нужно привязать шаблон / контроллер. Если ничего не указано, будет создана новая дочерняя область. Эта область будет уничтожена при удалении нижнего листа, если для preserveScope не установлено значение true.
preserveScope — {boolean =} — определяет, следует ли сохранять область при удалении элемента. По умолчанию это ложь.
controller — {string =} — Контроллер, связанный с этим нижним листом.
locals — {string =} — объект, содержащий пары ключ / значение. Ключи будут использоваться как имена значений для ввода в контроллер. Например, localals: {three: 3} вставит три в контроллер со значением 3.
clickOutsideToClose — {boolean =} — определяет, может ли пользователь щелкнуть вне нижнего листа, чтобы закрыть его. По умолчанию это правда.
resolv — {object =} — Аналогично местным жителям, за исключением того, что в качестве значений он принимает обещания, и нижний лист не открывается до разрешения обещаний.
parent — {element =} — Элемент, к которому нужно добавить нижний лист. Родитель может быть функцией, строкой, объектом или нулем. По умолчанию добавляется в тело корневого элемента (или корневого элемента) приложения. например, angular.element (document.getElementById (‘content’)) или «#content».
disableParentScroll — {boolean =} — Отключить ли прокрутку, когда открыт нижний лист. По умолчанию верно.
обещание
Обещание, которое может быть разрешено с помощью $ mdBottomSheet.hide () или отклонено с помощью $ mdBottomSheet.cancel ().
пример
В следующем примере показано использование службы $ mdBottomSheet, а также использование нижнего листа.
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>
Результат
Проверьте результат.
Угловой Материал — Карты
MD-карта , Angular Directive, является директивой контейнера и используется для рисования карт в приложении angularjs. В следующей таблице перечислены угловые директивы и классы, используемые в md-card.
| Sr.No | Директива / Класс и описание |
|---|---|
| 1 |
<мкр-карты заголовок> Заголовок для карты, содержит аватар, текст и изображение в квадрате. |
| 2 |
<мкр-карта-аватар> Карточка аватара. |
| 3 |
мкр-пользователь-аватар Класс для изображения пользователя. |
| 4 |
<мкр-значок> Директива иконы. |
| 5 |
<мкр-карта-заголовок-текст> Содержит элементы для описания карты. |
| 6 |
мкр-название Класс для названия карты. |
| 7 |
мкр-подзаголовок Класс для подзаголовка карты. |
| 8 |
<IMG> Изображение для карты. |
| 9 |
<мкр-карты название> Название содержимого карты. |
| 10 |
<мкр-карта титульного текст> Контейнер для заголовка текста. |
| 11 |
мкр-заголовок Класс для заголовка содержимого карты. |
| 12 |
мкр-подзаголовок Класс для подзаголовка содержимого карты. |
| 13 |
<мкр-карты название СМИ> Квадратное изображение в заголовке. |
| 14 |
мкр-медиа-см Класс для маленького изображения. |
| 15 |
мкр-медиа-мкр Класс для среднего изображения. |
| 16 |
мкр-медиа-Л.Г. Класс для большого изображения. |
| 17 |
<мкр-карты содержание> Содержание карты. |
| 18 |
мкр-медиа-х Класс для очень большого изображения. |
| 19 |
<мкр-карта-акции> Карточные действия. |
| 20 |
<мкр-карта значок-акция> Значок действия. |
<мкр-карты заголовок>
Заголовок для карты, содержит аватар, текст и изображение в квадрате.
<мкр-карта-аватар>
Карточка аватара.
мкр-пользователь-аватар
Класс для изображения пользователя.
<мкр-значок>
Директива иконы.
<мкр-карта-заголовок-текст>
Содержит элементы для описания карты.
мкр-название
Класс для названия карты.
мкр-подзаголовок
Класс для подзаголовка карты.
<IMG>
Изображение для карты.
<мкр-карты название>
Название содержимого карты.
<мкр-карта титульного текст>
Контейнер для заголовка текста.
мкр-заголовок
Класс для заголовка содержимого карты.
мкр-подзаголовок
Класс для подзаголовка содержимого карты.
<мкр-карты название СМИ>
Квадратное изображение в заголовке.
мкр-медиа-см
Класс для маленького изображения.
мкр-медиа-мкр
Класс для среднего изображения.
мкр-медиа-Л.Г.
Класс для большого изображения.
<мкр-карты содержание>
Содержание карты.
мкр-медиа-х
Класс для очень большого изображения.
<мкр-карта-акции>
Карточные действия.
<мкр-карта значок-акция>
Значок действия.
пример
В следующем примере показано использование директивы md-card, а также использование классов карт.
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>
Результат
Проверьте результат.
Угловой Материал — Виджеты
Angular Material предоставляет богатую библиотеку виджетов пользовательского интерфейса. Это позволяет пользователям иметь расширенные возможности взаимодействия с приложением.
В следующей таблице перечислены несколько важных виджетов с их описанием.
| Sr.No | Виджет и описание |
|---|---|
| 1 | Кнопки
Кнопка md , Angular Directive, является директивой кнопки, имеющей дополнительные чернила (и по умолчанию включены). Если указан атрибут href или ng-href , то эта директива действует как элемент привязки. |
| 2 | CheckBoxes
Md-checkbox , Angular Directive, используется как элемент управления checkbox. |
| 3 | содержание
Угловая директива md-content является контейнерным элементом и используется для прокручиваемого контента. Атрибут layout-padding может быть добавлен для добавления содержимого. |
| 4 | DatePicker
Угловая директива md-datepicker — это элемент управления вводом для выбора даты. Он также поддерживает ngMessages для проверки ввода. |
| 5 | Диалоги
Md-dialog , угловая директива, является элементом контейнера и используется для отображения диалогового окна. Его элемент md-dialog-content содержит содержимое диалога, а md-dialog-actions отвечает за действия диалога. MdDialog , Angular Service, открывает диалог над приложением, чтобы держать пользователей в курсе и помогать им принимать решения. |
| 6 | делитель
Угловая директива md-divider является элементом правила и используется для отображения тонкого упрощенного правила для группировки и разделения содержимого в списках и макетах страниц. |
| 7 | Список
Директива Angular md-list — это контейнерный компонент, содержащий дочерние элементы md-list-item . Директива md-list-item является компонентом контейнера для элементов строки контейнера md-list. CSS-классы md-2-line и md-3-line могут быть добавлены в md-list-item, чтобы увеличить высоту строки с 22px и 40px соответственно. |
| 8 | Меню
MD-меню , угловая директива, является компонентом для отображения дополнительных параметров в контексте выполненного действия. MD-меню имеет два дочерних элемента. Первый элемент является элементом триггера и используется для открытия меню. Второй элемент — это md-menu-content для представления содержимого меню при его открытии. Md-menu-content обычно содержит пункты меню как md-menu-item. |
| 9 | Строка меню
Панель md-menu-bar представляет собой контейнерный компонент для хранения нескольких меню. Строка меню помогает создать в операционной системе предусмотренный эффект меню. |
| 10 | Прогресс Бары
Md-progress-round и md-progress-linear являются угловыми директивами прогресса и используются для отображения сообщения о загрузке содержимого в приложении. |
| 11 | Радио-кнопки
Угловые директивы md-radio-group и md-radio-button используются для отображения переключателей в приложении. Md-radio-group является контейнером группировки для элементов md-radio-button. |
| 12 | Выбирается
Md-select , Angular направляет, чтобы показать окно выбора, ограниченное ng-моделью. |
| 13 | Потрясающие Панели инструментов
Md-fab-toolbar , угловая директива, используется для отображения панели инструментов из элементов или кнопок для быстрого доступа к общим действиям. |
| 14 | Слайдеры
Ползунок md , угловые директивы, используется для отображения компонента диапазона. Имеет два режима —
|
| 15 | Вкладки
Директивы md-tabs и md-tab Angular используются для отображения вкладок в приложении. md-tabs — это контейнер для группировки элементов md-tab. |
| 16 | Панели инструментов
Панель инструментов md , угловые директивы, используется для отображения панели инструментов, которая обычно является областью над содержимым для отображения заголовка и соответствующих кнопок. |
| 17 | Всплывающие
Angular Material предоставляет различные специальные методы для показа пользователям ненавязчивых подсказок. Angular Material предоставляет способы назначения направлений для них, а директива md-tooltip используется для отображения подсказок. Подсказка активируется всякий раз, когда пользователь фокусируется, наводит курсор или касается родительского компонента. |
| 18 | чипсы
Угловая директива md-chips используется в качестве специального компонента, называемого чипом, и может использоваться для представления небольшого набора информации, например, контакта, тегов и т. Д. Пользовательский шаблон может использоваться для визуализации содержимого чипа. Это может быть достигнуто путем указания элемента md-chip-template, имеющего пользовательский контент как дочерний элемент md-chips. |
| 19 | Контактные фишки
Угловая директива md-contact-chips — это элемент управления вводом, основанный на микросхемах и использующий элемент md-autocomplete . Компонент контактной микросхемы принимает выражение запроса, которое возвращает список возможных контактов. Пользователь может выбрать один из них и добавить его в список доступных чипов. |
Кнопка md , Angular Directive, является директивой кнопки, имеющей дополнительные чернила (и по умолчанию включены). Если указан атрибут href или ng-href , то эта директива действует как элемент привязки.
Md-checkbox , Angular Directive, используется как элемент управления checkbox.
Угловая директива md-content является контейнерным элементом и используется для прокручиваемого контента. Атрибут layout-padding может быть добавлен для добавления содержимого.
Угловая директива md-datepicker — это элемент управления вводом для выбора даты. Он также поддерживает ngMessages для проверки ввода.
Md-dialog , угловая директива, является элементом контейнера и используется для отображения диалогового окна. Его элемент md-dialog-content содержит содержимое диалога, а md-dialog-actions отвечает за действия диалога.
MdDialog , Angular Service, открывает диалог над приложением, чтобы держать пользователей в курсе и помогать им принимать решения.
Угловая директива md-divider является элементом правила и используется для отображения тонкого упрощенного правила для группировки и разделения содержимого в списках и макетах страниц.
Директива Angular md-list — это контейнерный компонент, содержащий дочерние элементы md-list-item . Директива md-list-item является компонентом контейнера для элементов строки контейнера md-list. CSS-классы md-2-line и md-3-line могут быть добавлены в md-list-item, чтобы увеличить высоту строки с 22px и 40px соответственно.
MD-меню , угловая директива, является компонентом для отображения дополнительных параметров в контексте выполненного действия. MD-меню имеет два дочерних элемента. Первый элемент является элементом триггера и используется для открытия меню. Второй элемент — это md-menu-content для представления содержимого меню при его открытии. Md-menu-content обычно содержит пункты меню как md-menu-item.
Панель md-menu-bar представляет собой контейнерный компонент для хранения нескольких меню. Строка меню помогает создать в операционной системе предусмотренный эффект меню.
Md-progress-round и md-progress-linear являются угловыми директивами прогресса и используются для отображения сообщения о загрузке содержимого в приложении.
Угловые директивы md-radio-group и md-radio-button используются для отображения переключателей в приложении. Md-radio-group является контейнером группировки для элементов md-radio-button.
Md-select , Angular направляет, чтобы показать окно выбора, ограниченное ng-моделью.
Md-fab-toolbar , угловая директива, используется для отображения панели инструментов из элементов или кнопок для быстрого доступа к общим действиям.
Ползунок md , угловые директивы, используется для отображения компонента диапазона. Имеет два режима —
нормальный — пользователь может перемещаться между широким диапазоном значений. По умолчанию.
дискретный — пользователь может скользить между выбранными значениями. Чтобы включить дискретный режим, используйте атрибуты md-discrete и step.
Директивы md-tabs и md-tab Angular используются для отображения вкладок в приложении. md-tabs — это контейнер для группировки элементов md-tab.
Панель инструментов md , угловые директивы, используется для отображения панели инструментов, которая обычно является областью над содержимым для отображения заголовка и соответствующих кнопок.
Angular Material предоставляет различные специальные методы для показа пользователям ненавязчивых подсказок. Angular Material предоставляет способы назначения направлений для них, а директива md-tooltip используется для отображения подсказок. Подсказка активируется всякий раз, когда пользователь фокусируется, наводит курсор или касается родительского компонента.
Угловая директива md-chips используется в качестве специального компонента, называемого чипом, и может использоваться для представления небольшого набора информации, например, контакта, тегов и т. Д. Пользовательский шаблон может использоваться для визуализации содержимого чипа. Это может быть достигнуто путем указания элемента md-chip-template, имеющего пользовательский контент как дочерний элемент md-chips.
Угловая директива md-contact-chips — это элемент управления вводом, основанный на микросхемах и использующий элемент md-autocomplete . Компонент контактной микросхемы принимает выражение запроса, которое возвращает список возможных контактов. Пользователь может выбрать один из них и добавить его в список доступных чипов.
Угловой Материал — Макеты
Директива по планировке
Директива Layout для элемента контейнера используется для указания направления компоновки для его дочерних элементов. Ниже приведены назначаемые значения для Директивы макета —
-
row — элементы располагаются горизонтально с max-height = 100%, а max-width — это ширина элементов в контейнере.
-
столбец — элементы располагаются вертикально с max-width = 100%, а max-height — высота элементов в контейнере.
row — элементы располагаются горизонтально с max-height = 100%, а max-width — это ширина элементов в контейнере.
столбец — элементы располагаются вертикально с max-width = 100%, а max-height — высота элементов в контейнере.
Чтобы адаптивный дизайн, такой как макет, автоматически изменялся в зависимости от размера экрана устройства, API-интерфейсы макета, перечисленные в следующей таблице, можно использовать для установки направления макета для устройств с шириной вида.
| Sr.No | Ширина API и устройства, когда точка останова переопределяет по умолчанию |
|---|---|
| 1 |
расположение Устанавливает направление макета по умолчанию, если оно не переопределено другой точкой останова. |
| 2 |
топологий хз ширина <600 пикселей |
| 3 |
Схема-GT-XS ширина> = 600 пикселей |
| 4 |
макет-см 600 пикселей <= ширина <960 пикселей |
| 5 |
Схема-GT-см ширина> = 960 пикселей |
| 6 |
макет-мкр 960px <= ширина <1280px |
| 7 |
Макет-GT-мкр ширина> = 1280 пикселей |
| 8 |
макет-Л.Г. 1280 пикселей <= ширина <1920 пикселей |
| 9 |
Макет-GT-LG ширина> = 1920px |
| 10 |
макет-х ширина> = 1920px |
расположение
Устанавливает направление макета по умолчанию, если оно не переопределено другой точкой останова.
топологий хз
ширина <600 пикселей
Схема-GT-XS
ширина> = 600 пикселей
макет-см
600 пикселей <= ширина <960 пикселей
Схема-GT-см
ширина> = 960 пикселей
макет-мкр
960px <= ширина <1280px
Макет-GT-мкр
ширина> = 1280 пикселей
макет-Л.Г.
1280 пикселей <= ширина <1920 пикселей
Макет-GT-LG
ширина> = 1920px
макет-х
ширина> = 1920px
пример
В следующем примере показано использование директивы layout, а также использование 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>
Результат
Проверьте результат.
Директива Flex
Директива flex на элементе контейнера используется для настройки размера и положения элементов. Он определяет способ, которым элемент должен регулировать свой размер относительно его родительского контейнера и других элементов в контейнере. Ниже приведены назначаемые значения для директивы flex —
-
кратно 5 — 5, 10, 15 … 100
-
33 — 33%
-
66 — 66%
кратно 5 — 5, 10, 15 … 100
33 — 33%
66 — 66%
пример
В следующем примере показано использование директивы flex, а также использование 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>
Результат
Проверьте результат.
Угловой материал — входы
Директива Angular md-input-container — это контейнерный компонент, который содержит любой элемент <input> или <textarea> в качестве дочернего элемента. Он также поддерживает обработку ошибок с использованием стандартных директив ng-messages и анимирует сообщения, используя события ngEnter / ngLeave или события ngShow / ngHide.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-input-container .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
мкр-MaxLength Максимально допустимое количество символов в этом входе. Если это указано, счетчик символов будет отображаться под вводом. Назначение md-maxlength — показать текст счетчика максимальной длины. Если вам не нужен текст счетчика и требуется только «простая» проверка, вы можете использовать «простые» атрибуты ng-maxlength или maxlength. |
| 2 |
ария-этикетка Aria-label требуется, когда нет этикетки. Предупреждающее сообщение будет зарегистрировано в консоли, если метка отсутствует. |
| 3 |
заполнитель Альтернативный подход к использованию aria-label, когда метка отсутствует. Текст-заполнитель копируется в атрибут aria-label. |
| 4 |
не мкр-не-Autogrow При наличии текстовые области не будут расти автоматически. |
| 5 |
мкр-обнаружить скрытый Когда текстовые области присутствуют, они будут иметь правильный размер, когда они будут обнаружены после скрытия. По умолчанию это отключено по соображениям производительности, поскольку гарантирует повторное выполнение каждого цикла дайджеста. |
мкр-MaxLength
Максимально допустимое количество символов в этом входе. Если это указано, счетчик символов будет отображаться под вводом. Назначение md-maxlength — показать текст счетчика максимальной длины. Если вам не нужен текст счетчика и требуется только «простая» проверка, вы можете использовать «простые» атрибуты ng-maxlength или maxlength.
ария-этикетка
Aria-label требуется, когда нет этикетки. Предупреждающее сообщение будет зарегистрировано в консоли, если метка отсутствует.
заполнитель
Альтернативный подход к использованию aria-label, когда метка отсутствует. Текст-заполнитель копируется в атрибут aria-label.
не мкр-не-Autogrow
При наличии текстовые области не будут расти автоматически.
мкр-обнаружить скрытый
Когда текстовые области присутствуют, они будут иметь правильный размер, когда они будут обнаружены после скрытия. По умолчанию это отключено по соображениям производительности, поскольку гарантирует повторное выполнение каждого цикла дайджеста.
пример
В следующем примере показано использование директивы md-input-container, а также использование входов.
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>
Результат
Проверьте результат.
Угловой Материал — Иконы
Md-icon , угловая директива, является компонентом для отображения векторных значков в приложении. Он поддерживает шрифты значков и значки SVG, кроме использования значков Google Material.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-icon .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
* md-font-icon Это строковое имя значка CSS, связанного с font-face, которое будет использоваться для визуализации значка. Требует предварительной загрузки шрифтов и именованных стилей CSS. |
| 2 |
* md-font-set Это имя стиля CSS, связанное с библиотекой шрифтов, которое будет назначено как класс для лигатуры font-icon. Это значение также может быть псевдонимом, который используется для поиска имени класса; внутренне используйте $ mdIconProvider.fontSet (<alias>), чтобы определить имя стиля. |
| 3 |
* MD-SVG-SRC Это строковый URL (или выражение), используемый для загрузки, кэширования и отображения внешнего SVG. |
| 4 |
* md-svg-icon Это имя строки, используемой для поиска иконки из внутреннего кэша; Интерполированные строки или выражения также могут быть использованы. Определенные имена наборов могут использоваться с синтаксисом <имя набора>: <имя значка>. Чтобы использовать наборы значков, разработчики должны предварительно зарегистрировать наборы с помощью службы $ mdIconProvider. |
| 5 |
ария-этикетка Этот значок обозначает для доступности. Если указана пустая строка, иконка будет скрыта от слоя доступности с помощью aria-hidden = «true». Если на значке нет метки aria, а на родительском элементе нет метки, на консоль будет записано предупреждение. |
| 6 |
альт Этот значок обозначает для доступности. Если указана пустая строка, иконка будет скрыта от слоя доступности с помощью aria-hidden = «true». Если на значке нет ни alt, ни метки на родительском элементе, на консоль будет записано предупреждение. |
* md-font-icon
Это строковое имя значка CSS, связанного с font-face, которое будет использоваться для визуализации значка. Требует предварительной загрузки шрифтов и именованных стилей CSS.
* md-font-set
Это имя стиля CSS, связанное с библиотекой шрифтов, которое будет назначено как класс для лигатуры font-icon. Это значение также может быть псевдонимом, который используется для поиска имени класса; внутренне используйте $ mdIconProvider.fontSet (<alias>), чтобы определить имя стиля.
* MD-SVG-SRC
Это строковый URL (или выражение), используемый для загрузки, кэширования и отображения внешнего SVG.
* md-svg-icon
Это имя строки, используемой для поиска иконки из внутреннего кэша; Интерполированные строки или выражения также могут быть использованы. Определенные имена наборов могут использоваться с синтаксисом <имя набора>: <имя значка>. Чтобы использовать наборы значков, разработчики должны предварительно зарегистрировать наборы с помощью службы $ mdIconProvider.
ария-этикетка
Этот значок обозначает для доступности. Если указана пустая строка, иконка будет скрыта от слоя доступности с помощью aria-hidden = «true». Если на значке нет метки aria, а на родительском элементе нет метки, на консоль будет записано предупреждение.
альт
Этот значок обозначает для доступности. Если указана пустая строка, иконка будет скрыта от слоя доступности с помощью aria-hidden = «true». Если на значке нет ни alt, ни метки на родительском элементе, на консоль будет записано предупреждение.
пример
В следующем примере показано использование директивы md-icons, а также использование значков.
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>
Результат
Проверьте результат.
Угловой Материал — Сетки
Md-grid-list , угловая директива, является компонентом для разметки контента для экранов разных размеров. Сетка имеет 12 столбцов на экране размера рабочего стола, 8 на экране размера планшета и 4 на экране размера телефона, где каждый размер имеет предопределенные поля и желоба. Клетки располагаются последовательно в порядке, в котором они определены.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-grid-list .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
* MD-Cols Это для количества столбцов в сетке. |
| 2 |
* md-row-height Один из
|
| 3 |
мкр-водосток Объем пространства между плитками в единицах CSS (по умолчанию 1px). |
| 4 |
мкр-на-макета Выражение для оценки после макета. Объект события доступен как $ event и содержит информацию о производительности. |
* MD-Cols
Это для количества столбцов в сетке.
* md-row-height
Один из
Длина CSS — строки фиксированной высоты (например, 8px или 1rem).
{ширина}: {высота} — отношение ширины к высоте (например, md-row-height = «16: 9»).
«fit» — высота будет определяться путем деления доступной высоты на количество рядов.
мкр-водосток
Объем пространства между плитками в единицах CSS (по умолчанию 1px).
мкр-на-макета
Выражение для оценки после макета. Объект события доступен как $ event и содержит информацию о производительности.
пример
В следующем примере показано использование директивы md-grid-list, а также использование grid.
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>
Результат
Проверьте результат.
Измените размер экрана, чтобы увидеть эффект.
Угловой материал — SideNav
Md-sidenav , директива Angular, используется для отображения компонента контейнера, который можно показать или скрыть программно. По умолчанию он выдвигается поверх основной области содержимого.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-sidenav.
| Sr.No | Параметр и описание |
|---|---|
| 1 |
мкр-это открытый Модель, привязанная к тому, открыт ли sidenav. |
| 2 |
мкр-компонент-идентификатор componentId для использования со службой $ mdSidenav. |
| 3 |
мкр-это автоподстройки открытым Когда это выражение принимает значение true, sidenav «блокируется»: оно попадает в поток контента, а не появляется поверх него. Это переопределяет атрибут is-open. Служба $ mdMedia () работает с атрибутом is-locked-open, который может быть задан медиа-запросом или одним из предустановок sm, gt-sm, md, gt-md, lg или gt-lg. Примеры — <md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->
|
мкр-это открытый
Модель, привязанная к тому, открыт ли sidenav.
мкр-компонент-идентификатор
componentId для использования со службой $ mdSidenav.
мкр-это автоподстройки открытым
Когда это выражение принимает значение true, sidenav «блокируется»: оно попадает в поток контента, а не появляется поверх него. Это переопределяет атрибут is-open. Служба $ mdMedia () работает с атрибутом is-locked-open, который может быть задан медиа-запросом или одним из предустановок sm, gt-sm, md, gt-md, lg или gt-lg.
Примеры —
пример
В следующем примере показано использование md-sidenav, а также использование компонента sidenav .
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>
Результат
Проверьте результат.
Угловой материал — Fab Speed Dial
Md-fab-speed-dial , угловая директива, используется для отображения ряда всплывающих элементов или кнопок для быстрого доступа к общим действиям.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-fab-speed-dial .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
* мд-направление Это определяет направление, в котором должен отображаться быстрый набор относительно элемента триггера. |
| 2 |
мкр-открытая Это помогает программно контролировать, виден ли быстрый набор. |
* мд-направление
Это определяет направление, в котором должен отображаться быстрый набор относительно элемента триггера.
мкр-открытая
Это помогает программно контролировать, виден ли быстрый набор.
пример
В следующем примере показано использование директивы md-fab-speed-dial, а также использование быстрого набора.
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>
Результат
Проверьте результат.
Угловой материал — подзаголовки
Подзаголовок md , угловая директива, используется для отображения подзаголовка раздела.
пример
В следующем примере показано использование md-subheader, а также использование компонента 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>
Результат
Проверьте результат.
Угловой Материал — Размах
Функциональность Swipe предназначена для мобильных устройств. Следующие директивы используются для обработки смахиваний.
-
md-swipe-down , Angular-директива используется для указания пользовательского поведения, когда элемент перемещается вниз.
-
md-swipe-left , угловая директива используется для указания пользовательского поведения, когда элемент перемещается влево.
-
md-swipe-right , угловая директива используется для указания пользовательского поведения, когда элемент проведен вправо.
-
md-swipe-up , Angular-директива используется для указания пользовательского поведения при взмахе элемента.
md-swipe-down , Angular-директива используется для указания пользовательского поведения, когда элемент перемещается вниз.
md-swipe-left , угловая директива используется для указания пользовательского поведения, когда элемент перемещается влево.
md-swipe-right , угловая директива используется для указания пользовательского поведения, когда элемент проведен вправо.
md-swipe-up , Angular-директива используется для указания пользовательского поведения при взмахе элемента.
пример
В следующем примере показано использование md-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>
Результат
Проверьте результат.
Угловой Материал — Выключатели
MD-переключатель , угловая директива, используется для отображения переключателя.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-switch .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
* нг-модель Назначаемое угловое выражение для привязки к данным. |
| 2 |
название Имя свойства формы, в которой публикуется элемент управления. |
| 3 |
нг-истинное значение Значение, на которое должно быть установлено выражение при выборе. |
| 4 |
нг-ложное значение Значение, на которое должно быть установлено выражение, если оно не выбрано. |
| 5 |
нг-изменения Угловое выражение, которое должно выполняться при изменении ввода из-за взаимодействия пользователя с элементом ввода. |
| 6 |
нг-инвалидов En / Отключить на основе выражения. |
| 7 |
не мкр-не-чернил Использование атрибута указывает на использование эффектов пульсации чернил. |
| 8 |
ария-этикетка Это публикует метку кнопки, используемую программами чтения с экрана для доступности. По умолчанию это текст переключателя. |
* нг-модель
Назначаемое угловое выражение для привязки к данным.
название
Имя свойства формы, в которой публикуется элемент управления.
нг-истинное значение
Значение, на которое должно быть установлено выражение при выборе.
нг-ложное значение
Значение, на которое должно быть установлено выражение, если оно не выбрано.
нг-изменения
Угловое выражение, которое должно выполняться при изменении ввода из-за взаимодействия пользователя с элементом ввода.
нг-инвалидов
En / Отключить на основе выражения.
не мкр-не-чернил
Использование атрибута указывает на использование эффектов пульсации чернил.
ария-этикетка
Это публикует метку кнопки, используемую программами чтения с экрана для доступности. По умолчанию это текст переключателя.
пример
В следующем примере показано использование md-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>
Результат
Проверьте результат.
Угловой Материал — Тема
Компоненты Angular Material используют классы группы намерений, такие как md-primary, md-accent, md-warn и дополнительные классы для цветовых различий, таких как md-hue-1, md-hue-2 или md-hue-3. Следующие компоненты поддерживают использование вышеупомянутых классов.
- мкр-кнопка
- мкр-флажок
- мкр-прогресс круговой
- мкр-прогресс-линейный
- мкр-радио-кнопка
- мкр-слайдер
- мкр-переключатель
- мкр-вкладка
- мкр-текст-поплавок
- мкр-панель
Темы могут быть настроены с использованием $ mdThemingProvider во время настройки приложения. Следующие свойства могут быть использованы для назначения разных цветов поддонов.
- primaryPalette
- accentPalette
- warnPalette
- backgroundPalette
пример
В следующем примере показано использование тем в приложении 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>
Результат
Проверьте результат.
Угловой материал — тосты
Angular Material предоставляет различные специальные методы для показа ненавязчивых предупреждений пользователям. Он также предоставляет термин тост для них. Сервис $ mdToast используется для показа тостов.
пример
В следующем примере показано использование тостов.
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>
Результат
Проверьте результат.
Угловой Материал — Типография
Angular Material предоставляет различные типографские CSS-классы, которые можно использовать для создания визуальной согласованности в приложении Angular JS.
В следующей таблице перечислены различные классы с их описанием.
| Sr.No | Имя класса и описание |
|---|---|
| 1 |
мкр-дисплей-1 Показывает текст с обычным 34px. |
| 2 |
мкр-дисплей-2 Показывает текст с обычным 45px. |
| 3 |
мкр-дисплей-3 Показывает текст с обычным 56px. |
| 4 |
мкр-дисплей-4 Показывает текст с Light 112px. |
| 5 |
мкр-заголовок Показывает текст с обычным 24px. |
| 6 |
мкр-название Показывает текст со средним 20px. |
| 7 |
мкр-подзаголовок Показывает текст с обычным 16px. |
| 8 |
мкр-тело-1 Показывает текст с обычным 14px. |
| 9 |
мкр-тело-2 Показывает текст со средним 14px. |
| 10 |
мкр-кнопка Показывает кнопку со средним 14px. |
| 11 |
мкр-подпись Показывает текст с обычным 12px. |
мкр-дисплей-1
Показывает текст с обычным 34px.
мкр-дисплей-2
Показывает текст с обычным 45px.
мкр-дисплей-3
Показывает текст с обычным 56px.
мкр-дисплей-4
Показывает текст с Light 112px.
мкр-заголовок
Показывает текст с обычным 24px.
мкр-название
Показывает текст со средним 20px.
мкр-подзаголовок
Показывает текст с обычным 16px.
мкр-тело-1
Показывает текст с обычным 14px.
мкр-тело-2
Показывает текст со средним 14px.
мкр-кнопка
Показывает кнопку со средним 14px.
мкр-подпись
Показывает текст с обычным 12px.
пример
В следующем примере показано использование типографских CSS-классов.
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>
Результат
Проверьте результат.
Угловой материал — виртуальный повтор
Контейнер md-virtual-repeat-container является контейнером прокрутки для компонента md-virtual-repeat.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-virtual-repeat-container .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
мкр-топ-индекс Привязывает индекс элемента, находящегося в верхней части контейнера прокрутки, к $ scope. Он может как читать, так и устанавливать позицию прокрутки. |
| 2 |
мкр-Orient-горизонтальный Определяет, должен ли контейнер прокручиваться горизонтально (по умолчанию ориентация и прокрутка по вертикали). |
| 3 |
мкр-авто термоусадочные Когда он присутствует, контейнер будет уменьшаться, чтобы соответствовать количеству элементов, когда это число меньше его исходного размера. |
| 4 |
мкр-авто-термоусадочная мин Минимальное количество элементов, до которых сокращается md-auto-shrink (по умолчанию: 0). |
мкр-топ-индекс
Привязывает индекс элемента, находящегося в верхней части контейнера прокрутки, к $ scope. Он может как читать, так и устанавливать позицию прокрутки.
мкр-Orient-горизонтальный
Определяет, должен ли контейнер прокручиваться горизонтально (по умолчанию ориентация и прокрутка по вертикали).
мкр-авто термоусадочные
Когда он присутствует, контейнер будет уменьшаться, чтобы соответствовать количеству элементов, когда это число меньше его исходного размера.
мкр-авто-термоусадочная мин
Минимальное количество элементов, до которых сокращается md-auto-shrink (по умолчанию: 0).
MD-виртуальный повтор
Виртуальное повторение заменяет ng-repeat, чтобы визуализировать только достаточное количество HTML-элементов, чтобы заполнить контейнер и повторно использовать их, когда пользователь прокручивает.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-virtual-repeat .
| Sr.No | Параметр и описание |
|---|---|
| 1 |
мкр-элемент размера Высота или ширина повторяющихся элементов (которые должны быть одинаковыми для каждого элемента). Это необязательно. Это попытается прочитать размер из dom, если отсутствует, но все еще предполагает, что все повторяющиеся узлы имеют одинаковую высоту или ширину. |
| 2 |
мкр-экстра-имя Оценивает дополнительное имя, которому текущий повторяющийся элемент может быть назначен в повторяющейся области (необходим для использования в md-autocomplete). |
| 3 |
мкр-по-запросу При наличии обрабатывает аргумент md-virtual-repeat как объект, который может извлекать строки, а не как массив. Этот объект должен реализовывать следующий интерфейс с двумя (2) методами:
|
мкр-элемент размера
Высота или ширина повторяющихся элементов (которые должны быть одинаковыми для каждого элемента). Это необязательно. Это попытается прочитать размер из dom, если отсутствует, но все еще предполагает, что все повторяющиеся узлы имеют одинаковую высоту или ширину.
мкр-экстра-имя
Оценивает дополнительное имя, которому текущий повторяющийся элемент может быть назначен в повторяющейся области (необходим для использования в md-autocomplete).
мкр-по-запросу
При наличии обрабатывает аргумент md-virtual-repeat как объект, который может извлекать строки, а не как массив. Этот объект должен реализовывать следующий интерфейс с двумя (2) методами:
getItemAtIndex — function (index) [object] — Элемент с этим индексом или ноль, если он еще не загружен (в этом случае он должен начать загрузку элемента).
getLength — function () [number] — Длина данных, до которой должен быть измерен контейнер повторителя. В идеале, когда число известно, этот метод должен его вернуть. В противном случае, верните большее число, чем загруженные в данный момент элементы, чтобы получить поведение бесконечной прокрутки.
пример
В следующем примере показано использование виртуального повтора.
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>
Результат
Проверьте результат.
Угловой материал — WhiteFrame
Angular Material имеет несколько специальных классов для отображения контейнеров в виде бумажных карточек с тенью.
В следующей таблице перечислены различные классы с их описанием.
| Sr.No | Имя класса и описание |
|---|---|
| 1 |
мкр-whiteframe- 1 dp Это оформляет контейнер для любого содержимого HTML с тенью на 1 пиксель. Добавляет zdepth из 1. |
| 2 |
мкр-whiteframe-2dp Это оформляет контейнер для любого содержимого HTML с тенью на 2 пикселя. Добавляет zdepth из 2. |
| 3 |
мкр-whiteframe-3dp Это оформляет контейнер для любого HTML-контента с тенью на 3 пикселя. Добавляет zdepth из 3. |
| 4 |
мкр-whiteframe-4ДП Это оформляет контейнер для любого содержимого HTML с тенью на 4 пикселя. Добавляет zdepth из 4. |
| 5 |
мкр-whiteframe-5 диоптрий Это оформляет контейнер для любого содержимого HTML с тенью на 5 пикселей. Добавляет zdepth из 5. |
| 6 |
мкр-whiteframe-6dp Это оформляет контейнер для любого содержимого HTML с тенью на 6 пикселей. Добавляет zdepth из 6. |
| 7 |
мкр-whiteframe-7dp Это оформляет контейнер для любого содержимого HTML с тенью на 7 пикселей. Добавляет zdepth из 7. |
| 8 |
мкр-whiteframe-8dp Это оформляет контейнер для любого содержимого HTML с тенью на 8 пикселей. Добавляет zdepth из 8. |
| 9 |
мкр-whiteframe-9DP Это оформляет контейнер для любого содержимого HTML с тенью с границами 9px. Добавляет zdepth из 9. |
| 10 |
мкр-whiteframe-10dp Это оформляет контейнер для любого содержимого HTML с тенью на 10 пикселей. Добавляет z-глубину 10. |
| 11 |
мкр-whiteframe-11dp Это оформляет контейнер для любого содержимого HTML с тенью на 11 пикселей. Добавляет z-глубину 11. |
| 12 |
мкр-whiteframe-12DP Это оформляет контейнер для любого содержимого HTML с тенью на 12 пикселей. Добавляет z-глубину 12. |
| 13 |
мкр-whiteframe-13dp Это оформляет контейнер для любого содержимого HTML с тенью на 13 пикселей. Добавляет z-глубину 13. |
| 14 |
мкр-whiteframe-14DP Это оформляет контейнер для любого содержимого HTML с тенью на 14 пикселей. Добавляет z-глубину 14. |
| 15 |
мкр-whiteframe-15dp Это оформляет контейнер для любого содержимого HTML с тенью на 15 пикселей. Добавляет z-глубину 15. |
| 16 |
мкр-whiteframe-16dp Это оформляет контейнер для любого содержимого HTML с тенью на 16 пикселей. Добавляет z-глубину 16. |
| 17 |
мкр-whiteframe-17dp Это оформляет контейнер для любого содержимого HTML с тенью на 17 пикселей. Добавляет z-глубину 17. |
| 18 |
мкр-whiteframe-18dp Это оформляет контейнер для любого содержимого HTML с тенью на 18 пикселей. Добавляет z-глубину 18. |
| 19 |
мкр-whiteframe-19dp Это оформляет контейнер для любого содержимого HTML с тенью с границами 19px. Добавляет z-глубину 19. |
| 20 |
мкр-whiteframe-20dp Это оформляет контейнер для любого содержимого HTML с тенью на 20 пикселей. Добавляет z-глубину 20. |
| 21 |
мкр-whiteframe-21dp Это оформляет контейнер для любого содержимого HTML с тенью на 21 пиксель. Добавляет z-глубину 21. |
| 22 |
мкр-whiteframe-22dp Это оформляет контейнер для любого содержимого HTML с тенью на 22 пикселя. Добавляет z-глубину 22. |
| 23 |
мкр-whiteframe-23dp Это оформляет контейнер для любого содержимого HTML с тенью на 23 пикселя. Добавляет z-глубину 23. |
| 24 |
мкр-whiteframe-24dp Это оформляет контейнер для любого содержимого HTML с тенью на 24 пикселя. Добавляет z-глубину 24. |
мкр-whiteframe- 1 dp
Это оформляет контейнер для любого содержимого HTML с тенью на 1 пиксель. Добавляет zdepth из 1.
мкр-whiteframe-2dp
Это оформляет контейнер для любого содержимого HTML с тенью на 2 пикселя. Добавляет zdepth из 2.
мкр-whiteframe-3dp
Это оформляет контейнер для любого HTML-контента с тенью на 3 пикселя. Добавляет zdepth из 3.
мкр-whiteframe-4ДП
Это оформляет контейнер для любого содержимого HTML с тенью на 4 пикселя. Добавляет zdepth из 4.
мкр-whiteframe-5 диоптрий
Это оформляет контейнер для любого содержимого HTML с тенью на 5 пикселей. Добавляет zdepth из 5.
мкр-whiteframe-6dp
Это оформляет контейнер для любого содержимого HTML с тенью на 6 пикселей. Добавляет zdepth из 6.
мкр-whiteframe-7dp
Это оформляет контейнер для любого содержимого HTML с тенью на 7 пикселей. Добавляет zdepth из 7.
мкр-whiteframe-8dp
Это оформляет контейнер для любого содержимого HTML с тенью на 8 пикселей. Добавляет zdepth из 8.
мкр-whiteframe-9DP
Это оформляет контейнер для любого содержимого HTML с тенью с границами 9px. Добавляет zdepth из 9.
мкр-whiteframe-10dp
Это оформляет контейнер для любого содержимого HTML с тенью на 10 пикселей. Добавляет z-глубину 10.
мкр-whiteframe-11dp
Это оформляет контейнер для любого содержимого HTML с тенью на 11 пикселей. Добавляет z-глубину 11.
мкр-whiteframe-12DP
Это оформляет контейнер для любого содержимого HTML с тенью на 12 пикселей. Добавляет z-глубину 12.
мкр-whiteframe-13dp
Это оформляет контейнер для любого содержимого HTML с тенью на 13 пикселей. Добавляет z-глубину 13.
мкр-whiteframe-14DP
Это оформляет контейнер для любого содержимого HTML с тенью на 14 пикселей. Добавляет z-глубину 14.
мкр-whiteframe-15dp
Это оформляет контейнер для любого содержимого HTML с тенью на 15 пикселей. Добавляет z-глубину 15.
мкр-whiteframe-16dp
Это оформляет контейнер для любого содержимого HTML с тенью на 16 пикселей. Добавляет z-глубину 16.
мкр-whiteframe-17dp
Это оформляет контейнер для любого содержимого HTML с тенью на 17 пикселей. Добавляет z-глубину 17.
мкр-whiteframe-18dp
Это оформляет контейнер для любого содержимого HTML с тенью на 18 пикселей. Добавляет z-глубину 18.
мкр-whiteframe-19dp
Это оформляет контейнер для любого содержимого HTML с тенью с границами 19px. Добавляет z-глубину 19.
мкр-whiteframe-20dp
Это оформляет контейнер для любого содержимого HTML с тенью на 20 пикселей. Добавляет z-глубину 20.
мкр-whiteframe-21dp
Это оформляет контейнер для любого содержимого HTML с тенью на 21 пиксель. Добавляет z-глубину 21.
мкр-whiteframe-22dp
Это оформляет контейнер для любого содержимого HTML с тенью на 22 пикселя. Добавляет z-глубину 22.
мкр-whiteframe-23dp
Это оформляет контейнер для любого содержимого HTML с тенью на 23 пикселя. Добавляет z-глубину 23.
мкр-whiteframe-24dp
Это оформляет контейнер для любого содержимого HTML с тенью на 24 пикселя. Добавляет z-глубину 24.
пример
В следующем примере показано использование теневых классов.
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>
Результат
Проверьте результат.