Angular Material предоставляет богатую библиотеку виджетов пользовательского интерфейса. Это позволяет пользователям иметь расширенные возможности взаимодействия с приложением.
В следующей таблице перечислены несколько важных виджетов с их описанием.
Кнопка md , Angular Directive, является директивой кнопки, имеющей дополнительные чернила (и по умолчанию включены). Если указан атрибут href или ng-href , то эта директива действует как элемент привязки.
Md-checkbox , Angular Directive, используется как элемент управления checkbox.
Угловая директива md-content является контейнерным элементом и используется для прокручиваемого контента. Атрибут layout-padding может быть добавлен для добавления содержимого.
Угловая директива md-datepicker — это элемент управления вводом для выбора даты. Он также поддерживает ngMessages для проверки ввода.
Md-dialog , угловая директива, является элементом контейнера и используется для отображения диалогового окна. Его элемент md-dialog-content содержит содержимое диалога, а md-dialog-actions отвечает за действия диалога.
MdDialog , Angular Service, открывает диалог над приложением, чтобы держать пользователей в курсе и помогать им принимать решения.
Угловая директива md-divider является элементом правила и используется для отображения тонкого упрощенного правила для группировки и разделения содержимого в списках и макетах страниц.
Директива Angular md-list — это контейнерный компонент, содержащий дочерние элементы md-list-item . Директива md-list-item является компонентом контейнера для элементов строки контейнера md-list. CSS-классы md-2-line и md-3-line могут быть добавлены в md-list-item, чтобы увеличить высоту строки с 22px и 40px соответственно.
MD-меню , угловая директива, является компонентом для отображения дополнительных параметров в контексте выполненного действия. MD-меню имеет два дочерних элемента. Первый элемент является элементом триггера и используется для открытия меню. Второй элемент — это md-menu-content для представления содержимого меню при его открытии. Md-menu-content обычно содержит пункты меню как md-menu-item.
Панель md-menu-bar представляет собой контейнерный компонент для хранения нескольких меню. Строка меню помогает создать в операционной системе предусмотренный эффект меню.
Md-progress-round и md-progress-linear являются угловыми директивами прогресса и используются для отображения сообщения о загрузке содержимого в приложении.
Угловые директивы md-radio-group и md-radio-button используются для отображения переключателей в приложении. Md-radio-group является контейнером группировки для элементов md-radio-button.
Md-select , Angular направляет, чтобы показать окно выбора, ограниченное ng-моделью.
Md-fab-toolbar , угловая директива, используется для отображения панели инструментов из элементов или кнопок для быстрого доступа к общим действиям.
Ползунок md , угловые директивы, используется для отображения компонента диапазона. Имеет два режима —
нормальный — пользователь может перемещаться между широким диапазоном значений. По умолчанию.
дискретный — пользователь может скользить между выбранными значениями. Чтобы включить дискретный режим, используйте атрибуты md-discrete и step.
Директивы md-tabs и md-tab Angular используются для отображения вкладок в приложении. md-tabs — это контейнер для группировки элементов md-tab.
Панель инструментов md , угловые директивы, используется для отображения панели инструментов, которая обычно является областью над содержимым для отображения заголовка и соответствующих кнопок.
Angular Material предоставляет различные специальные методы для показа пользователям ненавязчивых подсказок. Angular Material предоставляет способы назначения направлений для них, а директива md-tooltip используется для отображения подсказок. Подсказка активируется всякий раз, когда пользователь фокусируется, наводит курсор или касается родительского компонента.
Угловая директива md-chips используется в качестве специального компонента, называемого чипом, и может использоваться для представления небольшого набора информации, например, контакта, тегов и т. Д. Пользовательский шаблон может использоваться для визуализации содержимого чипа. Это может быть достигнуто путем указания элемента md-chip-template, имеющего пользовательский контент как дочерний элемент md-chips.
Угловая директива md-contact-chips — это элемент управления вводом, основанный на микросхемах и использующий элемент md-autocomplete . Компонент контактной микросхемы принимает выражение запроса, которое возвращает список возможных контактов. Пользователь может выбрать один из них и добавить его в список доступных чипов.