Угловой материал - Краткое руководство
Angular Material - это библиотека компонентов пользовательского интерфейса для разработчиков Angular JS. Многоразовые компоненты пользовательского интерфейса Angular Material помогают создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, соблюдая при этом современные принципы веб-дизайна, такие как переносимость браузера, независимость от устройств и постепенная деградация.
Ниже приведены несколько характерных особенностей Angular Material.
Встроенное адаптивное проектирование.
Стандартный CSS с минимальным размером.
Включает новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями Material Design.
Включает расширенные и специализированные функции, такие как карточки, панель инструментов, быстрый набор, боковая навигация, смахивание и т. Д.
Кроссбраузерность и может использоваться для создания повторно используемых веб-компонентов.
Адаптивный дизайн
Angular Material имеет встроенное адаптивное проектирование, поэтому веб-сайт, созданный с использованием Angular Material, будет изменять свой дизайн в соответствии с размером устройства.
Классы Angular Material созданы таким образом, что веб-сайт может соответствовать любому размеру экрана.
Веб-сайты, созданные с использованием Angular Material, полностью совместимы с ПК, планшетами и мобильными устройствами.
Расширяемый
Angular Material по дизайну очень простой и плоский.
Он разработан с учетом того факта, что намного проще добавить новые правила CSS, чем перезаписать существующие правила CSS.
Он поддерживает тени и жирные цвета.
Цвета и оттенки остаются одинаковыми для разных платформ и устройств.
И самое главное, Angular Material абсолютно бесплатен для использования.
Как использовать угловой материал?
Есть два способа использовать Angular Material:
Local Installation - Вы можете загрузить библиотеки материалов Angular с помощью npm, jspm или bower на свой локальный компьютер и включить их в свой HTML-код.
CDN Based Version - Вы можете включить файлы angular-material.min.css и angular-material js в свой HTML-код непосредственно из сети доставки контента (CDN).
Локальная установка
Перед тем, как использовать следующую команду npm, нам потребуется установка NodeJS в нашей системе. Чтобы получить информацию об узле JS, щелкните здесь и откройте интерфейс командной строки NodeJS. Мы будем использовать следующую команду для установки библиотек Angular Material.
npm install angular-materialПриведенная выше команда сгенерирует следующий вывод -
[email protected] node_modules\angular-animate
[email protected] node_modules\angular-aria
[email protected] node_modules\angular-messages
[email protected] node_modules\angular
[email protected] node_modules\angular-materialnpm загрузит файлы из 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.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | * md-items Выражение в формате элемент в элементах для перебора совпадений при поиске. |
| 2 | md-selected-item-change Выражение, которое будет запускаться каждый раз при выборе нового элемента. |
| 3 | md-search-text-change Выражение, которое будет запускаться каждый раз при обновлении текста поиска. |
| 4 | md-search-text Модель для привязки текста поискового запроса. |
| 5 | md-selected-item Модель, к которой нужно привязать выбранный элемент. |
| 6 | md-item-text Выражение, которое преобразует ваш объект в одну строку. |
| 7 | placeholder Текст-заполнитель, который будет перенаправлен на вход. |
| 8 | md-no-cache Отключает внутреннее кеширование при автозаполнении. |
| 9 | ng-disabled Определяет, отключать ли поле ввода. |
| 10 | md-min-length Задает минимальную длину текста до того, как автозаполнение предложит варианты. |
| 11 | md-delay Задает время ожидания (в миллисекундах) перед поиском результатов. |
| 12 | md-autofocus Если true, сразу сфокусирует входной элемент. |
| 13 | md-autoselect Если true, по умолчанию будет выбран первый элемент. |
| 14 | md-menu-class Это будет применено к раскрывающемуся меню для стилизации. |
| 15 | md-floating-label Это добавит плавающую метку для автозаполнения и обернет ее в md-input-container. |
| 16 | md-input-name Атрибут имени, присвоенный элементу ввода, который будет использоваться с FormController. |
| 17 | md-input-id Идентификатор, который будет добавлен к элементу ввода. |
| 18 | md-input-minlength Минимальная длина входного значения для проверки. |
| 19 | md-input-maxlength Максимальная длина входного значения для проверки. |
| 20 | md-select-on-match Если установлено значение true, автозаполнение будет автоматически выбирать точный элемент, если поисковый текст является точным совпадением. |
пример
В следующем примере показано использование md-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, используется для открытия нижнего листа над приложением и предоставляет простой API-интерфейс обещаний.
| SN | Метод и описание | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 1 | $mdBottomSheet.show(options); Показать нижний лист с указанными параметрами.
|
пример
В следующем примере показано использование $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-card, директива Angular, является директивой контейнера и используется для рисования карточек в приложении angularjs. В следующей таблице перечислены директивы и классы angular, используемые в md-card.
| Старший Нет | Директива / Класс и описание |
|---|---|
| 1 | <md-card-header> Заголовок карты, содержит аватар, текст и квадратное изображение. |
| 2 | <md-card-avatar> Карточный аватар. |
| 3 | md-user-avatar Класс для пользовательского изображения. |
| 4 | <md-icon> Директива Icon. |
| 5 | <md-card-header-text> Содержит элементы описания карты. |
| 6 | md-title Класс для названия карты. |
| 7 | md-subhead Класс для подзаголовка карты. |
| 8 | <img> Изображение для открытки. |
| 9 | <md-card-title> Заголовок содержимого карты. |
| 10 | <md-card-title-text> Контейнер текста заголовка карточки. |
| 11 | md-headline Класс для заголовка содержимого карты. |
| 12 | md-subhead Класс для подзаголовка содержимого карты. |
| 13 | <md-card-title-media> Изображение в квадрате в заголовке. |
| 14 | md-media-sm Класс для маленького изображения. |
| 15 | md-media-md Класс для среднего имиджа. |
| 16 | md-media-lg Класс для большого изображения. |
| 17 | <md-card-content> Содержание карты. |
| 18 | md-media-xl Класс для очень большого изображения. |
| 19 | <md-card-actions> Действия карты. |
| 20 | <md-card-icon-actions> Действия значка. |
пример
В следующем примере показано использование директивы 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 предоставляет богатую библиотеку виджетов пользовательского интерфейса. Это позволяет пользователям иметь расширенные возможности взаимодействия с приложением.
В следующей таблице перечислены несколько важных виджетов с их описанием.
| Старший Нет | Виджет и описание |
|---|---|
| 1 | Кнопки В md-button, угловая директива, является директивой кнопки, имеющей дополнительную рябь чернил (и по умолчанию включена). Еслиhref или же ng-href предоставляется атрибут, тогда эта директива действует как элемент привязки. |
| 2 | CheckBoxes В md-checkbox, угловая директива, используется в качестве флажка. |
| 3 | Содержание В md-content, угловая директива, является элементом контейнера и используется для прокручиваемого содержимого. Вlayout-padding Атрибут может быть добавлен для добавления содержимого. |
| 4 | DatePicker В md-datepicker, угловая директива, представляет собой элемент управления вводом для выбора даты. Он также поддерживает ngMessages для проверки ввода. |
| 5 | Диалоги В md-dialog, угловая директива, является контейнерным элементом и используется для отображения диалогового окна. Его элементmd-dialog-content содержит содержимое диалогового окна и md-dialog-actions отвечает за действия диалога. В mdDialog, служба Angular, открывает диалоговое окно над приложением, чтобы держать пользователей в курсе и помогать им принимать решения. |
| 6 | Делитель В md-divider, угловая директива, является элементом правила и используется для отображения тонкого упрощенного правила для группировки и разделения содержимого в списках и макетах страниц. |
| 7 | Список В md-list, директива Angular, представляет собой компонент контейнера, который содержит md-list-itemэлементы как дети. Директива md-list-item - это компонент контейнера для элементов строки контейнера md-list. CSS классыmd-2-line и md-3-line можно добавить в md-list-item, чтобы увеличить высоту строки на 22 и 40 пикселей соответственно. |
| 8 | Меню В md-menu, директива Angular, представляет собой компонент для отображения дополнительных параметров в контексте выполняемого действия. Вmd-menuимеет два дочерних элемента. Первый элемент - этоtrigger elementи используется для открытия меню. Второй элемент - этоmd-menu-contentдля представления содержимого меню, когда оно открыто. Md-menu-content обычно переносит пункты меню как md-menu-item. |
| 9 | Строка меню В md-menu-bar, является контейнерным компонентом для хранения нескольких меню. Строка меню помогает создать эффект меню, предоставляемый операционной системой. |
| 10 | Индикаторы прогресса В md-progress-circular и md-progress-linear являются директивами выполнения Angular и используются для отображения сообщения о загрузке содержимого в приложении. |
| 11 | Радио-кнопки В md-radio-group и md-radio-buttonДирективы Angular используются для отображения переключателей в приложении. Md-radio-group - это группирующий контейнер для элементов md-radio-button. |
| 12 | Выбирает В md-select, директивы Angular используются для отображения окна выбора, ограниченного ng-моделью. |
| 13 | Панели инструментов Fab В md-fab-toolbar, директива Angular, используется для отображения панели инструментов с элементами или кнопками для быстрого доступа к общим действиям. |
| 14 | Слайдеры В md-slider, директивы Angular используются для отображения компонента диапазона. У него есть два режима -
|
| 15 | Вкладки В md-tabs и md-tabДирективы Angular используются для отображения вкладок в приложении. md-tabs - это контейнер для группировки элементов md-tab. |
| 16 | Панели инструментов В md-toolbar, директивы Angular используются для отображения панели инструментов, которая обычно является областью над содержимым для отображения заголовка и соответствующих кнопок. |
| 17 | Всплывающие подсказки Angular Material предоставляет различные специальные методы для отображения ненавязчивых всплывающих подсказок для пользователей. Angular Material предоставляет способы назначать для них направления, а директива md-tooltip используется для отображения всплывающих подсказок. Всплывающая подсказка активируется всякий раз, когда пользователь фокусируется, наводит курсор на родительский компонент или касается его. |
| 18 | Чипсы В md-chips, угловая директива, используется как специальный компонент, называемый Chip, и может использоваться для представления небольшого набора информации, например, контакта, тегов и т. д. Пользовательский шаблон может использоваться для визуализации содержимого микросхемы. Этого можно добиться, указав элемент md-chip-template, имеющий настраиваемый контент, в качестве дочернего элемента md-chip. |
| 19 | Контактные чипы В md-contact-chips, угловая директива, представляет собой элемент управления вводом, построенный на md-chip и использующий md-autocompleteэлемент. Компонент контактной микросхемы принимает выражение запроса, которое возвращает список возможных контактов. Пользователь может выбрать один из них и добавить его в список доступных фишек. |
Директива по макету
Директива макета в элементе контейнера используется для указания направления макета для его дочерних элементов. Ниже приведены назначаемые значения для Директивы по макету.
row - Элементы располагаются по горизонтали с max-height = 100%, а max-width - это ширина элементов в контейнере.
column - Элементы расположены вертикально с max-width = 100%, а max-height - это высота элементов в контейнере.
Для адаптивного дизайна, такого как автоматическое изменение макета в зависимости от размера экрана устройства, API-интерфейсы макета, перечисленные в следующей таблице, могут использоваться для установки направления макета для устройств с шириной обзора.
| Старший Нет | API и ширина устройства, когда точка останова переопределяет значение по умолчанию |
|---|---|
| 1 | layout Устанавливает направление макета по умолчанию, если оно не отменено другой точкой останова. |
| 2 | layout-xs ширина <600 пикселей |
| 3 | layout-gt-xs ширина> = 600 пикселей |
| 4 | layout-sm 600 пикселей <= ширина <960 пикселей |
| 5 | layout-gt-sm ширина> = 960 пикселей |
| 6 | layout-md 960 пикселей <= ширина <1280 пикселей |
| 7 | layout-gt-md ширина> = 1280 пикселей |
| 8 | layout-lg 1280 пикселей <= ширина <1920 пикселей |
| 9 | layout-gt-lg ширина> = 1920 пикселей |
| 10 | layout-xl ширина> = 1920 пикселей |
пример
В следующем примере показано использование директивы 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:
multiples of 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>Результат
Проверьте результат.
В md-input-container, директива Angular, представляет собой компонент контейнера, который содержит любые <input> или же <textarea>элемент как ребенок. Он также поддерживает обработку ошибок с помощью стандартных директив ng-messages и анимирует сообщения с помощью событий ngEnter / ngLeave или событий ngShow / ngHide
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-input-container.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | md-maxlength Максимальное количество символов, разрешенное для этого ввода. Если это указано, счетчик символов будет показан под вводом. Цель md-maxlength - показать текст счетчика максимальной длины. Если вам не нужен текст счетчика и нужна только «обычная» проверка, вы можете использовать атрибуты «simple» ng-maxlength или maxlength. |
| 2 | aria-label Если этикетка отсутствует, требуется Aria-label. Если метка отсутствует, в консоли будет зарегистрировано предупреждающее сообщение. |
| 3 | placeholder Альтернативный подход к использованию aria-label при отсутствии метки. Текст заполнителя копируется в атрибут aria-label. |
| 4 | md-no-autogrow Если текстовые поля присутствуют, они не будут увеличиваться автоматически. |
| 5 | md-detect-hidden Текстовые области, если они присутствуют, будут иметь правильный размер, когда они будут открыты после скрытия. По умолчанию этот параметр отключен по соображениям производительности, так как гарантирует перекомпоновку каждого цикла дайджеста. |
пример
В следующем примере показано использование директивы 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, директива Angular, представляет собой компонент для отображения векторных значков в приложении. Он поддерживает шрифты иконок и значки SVG, помимо использования значков материалов Google.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-icon.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | * md-font-icon Это строковое имя значка CSS, связанного со шрифтом, которое будет использоваться для визуализации значка. Требуется предварительная загрузка шрифтов и названных стилей CSS. |
| 2 | * md-font-set Это имя стиля CSS, связанное с библиотекой шрифтов, которое будет назначено как класс для лигатуры шрифта и значка. Это значение также может быть псевдонимом, который используется для поиска имени класса; внутренне используйте $ mdIconProvider.fontSet (<alias>) для определения имени стиля. |
| 3 | * md-svg-src Это строковый URL-адрес (или выражение), используемый для загрузки, кеширования и отображения внешнего SVG. |
| 4 | * md-svg-icon Это строковое имя, используемое для поиска значка во внутреннем кэше; также могут использоваться интерполированные строки или выражения. Определенные имена наборов могут использоваться с синтаксисом <имя набора>: <имя значка>. Чтобы использовать наборы значков, разработчики должны предварительно зарегистрировать наборы с помощью службы $ mdIconProvider. |
| 5 | aria-label Этот значок помечается значком для доступности. Если указана пустая строка, значок будет скрыт от уровня доступности с aria-hidden = "true". Если на значке нет метки aria или метки родительского элемента, на консоль будет записано предупреждение. |
| 6 | alt Этот значок помечается значком для доступности. Если указана пустая строка, значок будет скрыт от уровня доступности с 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, директива Angular, представляет собой компонент для размещения контента для экранов различных размеров. Сетка имеет 12 столбцов на экране размера рабочего стола, 8 на экране размера планшета и 4 на экране размера телефона, где каждый размер имеет предварительно определенные поля и промежутки. Ячейки располагаются последовательно в ряду в том порядке, в котором они определены.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-grid-list.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | * md-cols Это количество столбцов в сетке. |
| 2 | * md-row-height Один из
|
| 3 | md-gutter Расстояние между плитками в единицах CSS (по умолчанию 1 пиксель). |
| 4 | md-on-layout Выражение для оценки после макета. Объект события доступен как $ 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>Результат
Проверьте результат.
Измените размер экрана, чтобы увидеть эффект.
В md-sidenav, директива Angular используется для отображения компонента контейнера, который может отображаться или скрываться программно. По умолчанию он выдвигается поверх основной области содержимого.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-sidenav
| Старший Нет | Параметр и описание |
|---|---|
| 1 | md-is-open Модель, привязанная к тому, открыта ли боковая навигация. |
| 2 | md-component-id componentId для использования с сервисом $ mdSidenav. |
| 3 | md-is-locked-open Когда это выражение принимает значение true, боковая навигация «блокируется»: она попадает в поток содержимого, а не появляется поверх него. Это переопределяет атрибут is-open. Служба $ mdMedia () доступна для атрибута is-locked-open, которому можно задать медиа-запрос или одну из предустановок sm, gt-sm, md, gt-md, lg или gt-lg. Examples - |
пример
В следующем примере показано использование 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>Результат
Проверьте результат.
В md-fab-speed-dial, директива Angular, используется для отображения серии всплывающих элементов или кнопок для быстрого доступа к общим действиям.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-fab-speed-dial.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | * md-direction Это определяет направление, в котором должен отображаться быстрый набор по отношению к элементу триггера. |
| 2 | md-open Это помогает программно контролировать, виден ли быстрый набор. |
пример
В следующем примере показано использование директивы 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-subheader, директива Angular, используется для отображения подзаголовка раздела.
пример
В следующем примере показано использование 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, директива Angular используется для указания настраиваемого поведения при смахивании элемента влево.
md-swipe-right, директива Angular используется для указания настраиваемого поведения при смахивании элемента вправо.
md-swipe-up, директива Angular используется для указания настраиваемого поведения при смахивании элемента вверх.
пример
В следующем примере показано использование md-swipe- *, а также использование компонентов 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-switch, директива Angular, используется для отображения переключателя.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-switch.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | * ng-model Назначаемое угловое выражение для привязки данных. |
| 2 | name Имя свойства формы, в которой публикуется элемент управления. |
| 3 | ng-true-value Значение, которое должно быть установлено при выборе выражения. |
| 4 | ng-false-value Значение, которое должно быть установлено для выражения, если оно не выбрано. |
| 5 | ng-change Выражение Angular, которое должно выполняться при изменении ввода из-за взаимодействия пользователя с элементом ввода. |
| 6 | ng-disabled En / Disable в зависимости от выражения. |
| 7 | md-no-ink Использование атрибута указывает на использование эффектов пульсации чернил. |
| 8 | aria-label Это публикует метку кнопки, используемую программами чтения с экрана для доступности. По умолчанию используется текст переключателя. |
пример
В следующем примере показано использование md-swipe- *, а также использование компонентов 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. Следующие компоненты поддерживают использование вышеупомянутых классов.
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
Темы можно настроить с помощью $ 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.
В следующей таблице перечислены различные классы с их описанием.
| Старший Нет | Имя и описание класса |
|---|---|
| 1 | md-display-1 Показывает текст с обычным размером 34 пикселей. |
| 2 | md-display-2 Показывает текст с обычным размером 45 пикселей. |
| 3 | md-display-3 Показывает текст с обычным размером 56 пикселей. |
| 4 | md-display-4 Показывает текст светлым 112 пикселей. |
| 5 | md-headline Показывает текст с обычными 24 пикселями. |
| 6 | md-title Показывает текст со средним размером 20 пикселей. |
| 7 | md-subhead Показывает текст с обычным размером 16 пикселей. |
| 8 | md-body-1 Показывает текст с обычным размером 14 пикселей. |
| 9 | md-body-2 Показывает текст со средним размером 14 пикселей. |
| 10 | md-button Показывает кнопку со средним размером 14 пикселей. |
| 11 | md-caption Показывает текст с обычным размером 12 пикселей. |
пример
В следующем примере показано использование классов 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.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | md-top-index Привязывает индекс элемента вверху контейнера прокрутки к $ scope. Он может как читать, так и устанавливать положение прокрутки. |
| 2 | md-orient-horizontal Определяет, должен ли контейнер прокручиваться по горизонтали (по умолчанию используется ориентация и вертикальная прокрутка). |
| 3 | md-auto-shrink Если контейнер присутствует, он сжимается, чтобы соответствовать количеству элементов, если это количество меньше его исходного размера. |
| 4 | md-auto-shrink-min Минимальное количество элементов, до которых будет сжиматься md-auto-shrink (по умолчанию: 0). |
md-виртуальный-повтор
Виртуальный повтор является заменой ng-repeat для визуализации достаточного количества html-элементов для заполнения контейнера и их повторного использования при прокрутке пользователем.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-virtual-repeat.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | md-item-size Высота или ширина повторяющихся элементов (которые должны быть идентичны для каждого элемента). Это необязательно. Это пытается прочитать размер из dom, если он отсутствует, но все же предполагает, что все повторяющиеся узлы имеют одинаковую высоту или ширину. |
| 2 | md-extra-name Оценивает дополнительное имя, которому может быть назначен текущий повторяемый элемент в повторяющейся области (необходимо для использования в md-autocomplete). |
| 3 | md-on-demand Когда присутствует, лечит md-virtual-repeat аргумент как объект, который может извлекать строки, а не массив. Этот объект должен реализовывать следующий интерфейс с двумя (2) методами:
|
пример
В следующем примере показано использование виртуального повтора.
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>Результат
Проверьте результат.
Angular Material имеет несколько специальных классов для отображения контейнеров в виде бумажных карточек с тенью.
В следующей таблице перечислены различные классы с их описанием.
| Старший Нет | Имя и описание класса |
|---|---|
| 1 | md-whiteframe-1dp Это стилизует контейнер для любого содержимого HTML с тенью с границей 1 пиксель. Добавляет zdepth 1. |
| 2 | md-whiteframe-2dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 2 пикселя. Добавляет zdepth 2. |
| 3 | md-whiteframe-3dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 3 пикселя. Добавляет глубину 3. |
| 4 | md-whiteframe-4dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 4 пикселя. Добавляет глубину 4. |
| 5 | md-whiteframe-5dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 5 пикселей. Добавляет глубину 5. |
| 6 | md-whiteframe-6dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 6 пикселей. Добавляет глубину 6. |
| 7 | md-whiteframe-7dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 7 пикселей. Добавляет zdepth 7. |
| 8 | md-whiteframe-8dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 8 пикселей. Добавляет zdepth 8. |
| 9 | md-whiteframe-9dp Это стилизует контейнер для любого содержимого HTML с тенью с границей 9 пикселей. Добавляет глубину 9. |
| 10 | md-whiteframe-10dp Это стилизует контейнер для любого содержимого HTML с тенью с границей 10 пикселей. Добавляет z-глубину 10. |
| 11 | md-whiteframe-11dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 11 пикселей. Добавляет z-глубину 11. |
| 12 | md-whiteframe-12dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 12 пикселей. Добавляет z-глубину 12. |
| 13 | md-whiteframe-13dp Это стилизует контейнер для любого содержимого HTML с тенью с границей 13 пикселей. Добавляет z-глубину 13. |
| 14 | md-whiteframe-14dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 14 пикселей. Добавляет z-глубину 14. |
| 15 | md-whiteframe-15dp Это стилизует контейнер для любого содержимого HTML с тенью с границей 15 пикселей. Добавляет z-глубину 15. |
| 16 | md-whiteframe-16dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 16 пикселей. Добавляет z-глубину 16. |
| 17 | md-whiteframe-17dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 17 пикселей. Добавляет z-глубину 17. |
| 18 | md-whiteframe-18dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 18 пикселей. Добавляет глубину по оси 18. |
| 19 | md-whiteframe-19dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 19 пикселей. Добавляет z-глубину 19. |
| 20 | md-whiteframe-20dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 20 пикселей. Добавляет z-глубину 20. |
| 21 год | md-whiteframe-21dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 21 пиксель. Добавляет z-глубину 21. |
| 22 | md-whiteframe-22dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 22 пикселя. Добавляет z-глубину 22. |
| 23 | md-whiteframe-23dp Это стилизует контейнер для любого содержимого HTML с тенью с рамкой 23 пикселя. Добавляет z-глубину 23. |
| 24 | md-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>Результат
Проверьте результат.