Угловой материал - Краткое руководство

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-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.

Старший Нет Параметр и описание
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);

Показать нижний лист с указанными параметрами.

SN Параметр и описание
1

* options

Объект параметров со следующими свойствами -

  • templateUrl - {string=}- URL-адрес файла шаблона html, который будет использоваться в качестве содержимого нижнего листа. Ограничения: в шаблоне должен быть внешний элемент md-bottom-sheet.

  • template - {string=} - То же, что templateUrl, за исключением того, что это фактическая строка шаблона.

  • scope - {object=}- Область, с которой нужно связать шаблон / контроллер. Если ничего не указано, будет создана новая дочерняя область. Эта область будет уничтожена при удалении нижнего листа, если для preserveScope не установлено значение true.

  • preserveScope - {boolean=}- Он определяет, следует ли сохранять область действия при удалении элемента. По умолчанию это ложь.

  • controller - {string=} - Контроллер, связанный с этим нижним листом.

  • locals - {string=}- Объект, содержащий пары ключ / значение. Ключи будут использоваться как имена значений для ввода в контроллер. Например,locals: {three: 3} введет три в контроллер со значением 3.

  • clickOutsideToClose - {boolean=}- Он определяет, может ли пользователь щелкнуть за пределами нижнего листа, чтобы закрыть его. По умолчанию это правда.

  • escapeToClose - {boolean =}: определяет, может ли пользователь нажать escape, чтобы закрыть нижний лист. По умолчанию это правда.

  • resolve - {object=} - Подобно локальным, за исключением того, что в качестве значений принимаются обещания, а нижний лист не открывается, пока не разрешатся обещания.

  • controllerAs - {string =}: псевдоним, которому назначается контроллер в области видимости.

  • parent - {element=}- Элемент, к которому нужно добавить нижний лист. Родителем может быть функция, строка, объект или значение NULL. По умолчанию добавляется к телу корневого элемента (или корневого элемента) приложения. например, angular.element (document.getElementById ('content')) или «#content».

  • disableParentScroll - {boolean=}- Отключить ли прокрутку при открытом нижнем листе. По умолчанию true.

Старший Нет Возврат и описание
1

promise

Обещание, которое можно разрешить с помощью $ 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-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 используются для отображения компонента диапазона. У него есть два режима -

  • normal- Пользователь может перемещаться между широким диапазоном значений. По умолчанию.

  • discrete- Пользователь может перемещаться между выбранными значениями. Для включения дискретного режима используйте атрибуты md-discte и step.

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

Один из

  • CSS length - Строки с фиксированной высотой (например, 8 пикселей или 1 бэр).

  • {width}:{height} - Отношение ширины к высоте (например, md-row-height = "16: 9").

  • "fit" - Высота будет определяться путем деления доступной высоты на количество строк.

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 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)-->

пример

В следующем примере показано использование 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) методами:

  • getItemAtIndex - function (index) [object] - элемент с этим индексом или null, если он еще не загружен (в этом случае он должен начать загрузку элемента).

  • 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>

Результат

Проверьте результат.

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>

Результат

Проверьте результат.