Компоненты UI / UX в Angular известны как Угловые материалы. Oнипомочь приложениям Angular выполнять эффективно . Однако, если вы еще не знаете о них, вот статья, которая поможет вам подробно изучить материалы Angular. Кроме того, тo получить глубокие знания об Angular, рассмотрите возможность регистрации в ' от Эдурека.
В этой статье я затрону следующие темы:
- Введение в угловые материалы
- Установка углового материала
- Угловые компоненты материала
- Угловой материал CDK
Введение в угловые материалы
Материалы были представлены как язык дизайна, разработанный Google в 2014 году. Материальный дизайн это инструментдля интерфейсных фреймворков, который поможет вам с визуальный , движение , и взаимодействие дизайн. Это также поможет вам адаптироваться к разным устройствам и разным размерам экрана. Во-первых, он был привязан к AngularJS, чтобы сделать эти приложения более привлекательный и выполнить Быстрее . Затем Google полностью переписал код с нуля и удалил JS, т.е. , и назвал его в сентябре 2016 года. Позже Google пометил Material Design как Angular, который использует и назвал его Angular Materials.
Угловые материалы или компоненты пользовательского интерфейса (UI) помогут вам разработать приложение в структурированный манера. Они привлекают пользователей и делают это легче получить доступ элементы или компоненты, присутствующие в вашем приложении. Они также помогают создавать привлекательные приложения с уникальными стили и формы . Эти компоненты помогают сделать ваше приложение более последовательный , быстрый , универсальный и даже дизайн отзывчивый веб-сайты.
Установка углового материала
Теперь давайте начнем с краткого руководства по установке Angular Materials. Перво-наперво убедитесь, что в вашей системе установлен Angular. Если вы не знакомы с Angular, обратитесь к ссылке на . После того, как вы все настроили, вы можете добавить Angular Materials в свой проект, используя следующую команду:
добавить @ angular / material
Во-первых, он попросит вас выбрать предварительно созданную тему или настраиваемую тему.
Вам нужно выбрать предварительно созданную тему «Индиго / Розовый», которая является темой по умолчанию для оформления вашего приложения. Вы также можете выбрать «Пользовательскую» тему, чтобы вы могли настраивать файлы тем, которые включают все распространенные стили.
Затем он попросит вас настроить HammerJS . HammerJS - популярная библиотека, в основном используемая в приложении Angular. Он добавляет поддержку сенсорных жестов, таких как Swipe, Pan, Pinch, Rotate и многих других, особенно в мобильных приложениях.
Вы можете выбрать «Да» или «Нет». HammerJS может быть полезен, когда вы используете свое приложение на мобильных устройствах. Поскольку мобильные телефоны оснащены сенсорными дисплеями, эти жесты более полезны и могут выглядеть модно в вашем мобильном приложении.
После того, как вы выберете свой выбор, он попросит вас настроить Браузерная анимация для углового материала.
Вам нужно выбрать «Да», чтобы вы могли использовать анимацию в своем приложении. Angular Animations делают ваше приложение более увлекательным и простым в использовании. Это может улучшить ваше приложение и улучшить взаимодействие с пользователем, что привлечет внимание пользователей.
Впоследствии это установит Angular Materials в ваше приложение.
Угловые компоненты материала
Как упоминалось ранее, компоненты Angular Material - это не что иное, как UI / UX Компоненты дизайна. Они содержат различные компоненты, такие как элементы управления формами, навигация, кнопки и индикаторы, всплывающие окна и многие другие. Эти компоненты помогают реализовать шаблоны в соответствии со спецификацией Material Design.
Забегая вперед, давайте рассмотрим несколько примеров того, как реализовать эти компоненты в вашем приложении Angular.
Навигация
Сначала я расскажу о компонентах в навигации.
- Панель инструментов
Вам необходимо ввести следующий код в поле app.component.html файл, чтобы использовать компонент панели инструментов в вашем приложении.
Учебник по материалам Angular это контейнер из материала Angular, который используется для заголовков и заголовков. Цвет контейнер можно изменить с помощью цвет свойство.По умолчанию панели инструментов используют нейтральный цвет фона в зависимости от текущей темы, то есть светлый или темный.Вы можете выбрать три темы по умолчанию: 'Первичный' , 'акцент' , или «Предупредить» .Чтобы использовать эту панель инструментов, вам необходимо сначала импортировать ее в app.module.ts файл из материалов Angular с помощью следующей команды:
импортировать {MatToolbarModule} из '@ angular / material'Позже вам также необходимо добавить этот модуль в импорт: [] раздел, расположенный в app.module.ts файл.
импорт: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Для Mat-Toolbar вам нужно добавить « MatToolbarModule ».
Теперь давайте обслужим ваш проект с помощью следующей команды:
of serve -o
Это откроет ваш проект в браузере по умолчанию вашей системы, как показано ниже:
Если вы хотите изменить цвет панели инструментов по вашему выбору, вы можете сделать это с помощью таблицы стилей CSS. Позвольте мне показать вам пример.
Сначала вам нужно стереть цвет собственность от контейнер, а затем введите следующий CSS код в app.component.css файл.
mat-toolbar {background-color: / * цвет-по-вашему-выбору * / color: / * цвет-текста * /}Теперь обслуживайте свой проект, чтобы увидеть результат.
- Меню
Далее я расскажу о компоненте меню. Вам необходимо ввести следующий код в свой app.component.html файл.
Учебник по материалам Angular Справка по настройкам менюДавайте добавим стиля Меню кнопка. Вам необходимо ввести следующий код в свой app.component.css файл.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}class = 'пробел' используется для добавления интервала между «Имя панели инструментов» и «Параметр меню».
Если вы не знакомы с таблицей стилей CSS, вы можете обратиться к нашему блогу на чтобы получить более подробную информацию.
Как и Панель инструментов, для использования и контейнеров, вам необходимо выполнить ту же процедуру, что и выше, чтобы импортировать MatMenuModule и MatButtonModule от угловатый материал и добавить их в импорт: [] раздел, расположенный в app.module.ts файл.
Запустите свой проект сейчас, чтобы отобразить результат.
Элементы управления формой
Теперь я расскажу о компонентах в Form Control.
- Поле формы
Как следует из названия, поле формы используется для ввода данных пользователем. Чаще всего он используется для регистрации пользователя в приложении или на веб-сайте.
Вам необходимо ввести следующий код в поле app.component.html файл, чтобы использовать компонент Form-Field в вашем приложении.
Элементы управления формой
имя
Как обычно, вам нужно импортировать MatFormFieldModule и MatInputModule и добавить их в импорт: [] раздел, расположенный в app.module.ts файл. Приведенный выше код обычно используется для ввода таких имен, как «Имя», «Фамилия» и т. Д. Вы даже можете использовать валидаторы и сделать поле обязательным. Например, вы можете использовать его для поля электронной почты. Вы можете скрыть или показать текст для паролей. Для справки ознакомьтесь с приведенным ниже кодом:
Введите свой адрес электронной почты {{getErrorMessage ()}} Введите пароль {{скрыть? 'visibility_off': 'видимость'}}В вашем app.component.css файл, вам необходимо добавить следующий код:
.example-container {padding-left: 50px}.Теперь в вашем app.component.ts файл, вам необходимо импортировать FormControl и Валидаторы от @ angular / формы каталог.
импортировать {FormControl, Validators} из '@ angular / forms'Вам нужно даже добавить текст для отображения ошибки внутри следующего класса.
класс экспорта AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Вы должны ввести значение': this.email.hasError ('email')? 'Недействительный адрес электронной почты': ''} hide = true}Ссылаясь на описанную выше процедуру, вам необходимо ввести следующий код в свой app.module.ts файл для импорта необходимых модулей.
импортировать {FormsModule, ReactiveFormsModule} из '@ angular / forms' импортировать {MatIconModule} из '@ angular / material'Позже вам нужно будет добавить эти модули в импорт: [] раздел.
- Переключатель
Радиокнопки обычно используются для выбора среди различных вариантов. Вы можете ознакомиться со следующим кодом.
Для app.component.html файл,
Пол
Мужской женский
Для app.component.css файл,
mat-radio-button {Padding-left: 50px}Теперь вам нужно импортировать MatRadioModule и добавьте это в импорт: [] раздел, расположенный в app.module.ts файл.
Позже вам нужно будет обслуживать свой проект для отображения вывода.
Забегая вперед, я расскажу об Angular Material CDK.
Угловой материал CDK
CDK, также известный как Комплект для разработки компонентов , это библиотека предопределенное поведение в Angular Material, который представляет собой набор инструментов, реализующих общие паттерны взаимодействия и особенности приложения . У него нет стиля, характерного для Material Design. Давайте посмотрим на пример CDK.
- Текстовое поле
Компонент «Текстовое поле» предоставляет утилиты для работы с полями ввода текста. Вы можете использовать компоненты CDK в текстовом поле, чтобы изменить размер входных данных. Давайте посмотрим на примере, как это реализовать.
Для app.component.html файл,
Угловой материал CDK
Размер шрифта 10 пикселей 12 пикселей 14 пикселей 16 пикселей 18 пикселей 20 пикселей Автоматическое изменение размера текстового поля
Для app.component.ts файла, вам необходимо сначала импортировать необходимые компоненты.
импортировать {CdkTextareaAutosize} из '@ angular / cdk / text-field' импортировать {NgZone, ViewChild} из '@ angular / core' импортировать {взять} из 'rxjs / operator'Теперь вам нужно ввести следующий код внутри класса.
вопросы на собеседовании с загрузчиком классов Java
export class AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Далее вам нужно импортировать MatSelectModule и добавьте это в импорт: [] раздел, расположенный в app.module.ts файл.
Наконец, вам нужно обслужить ваш проект для отображения вывода.
Это не вывод, и в Angular Materials есть несколько других компонентов. Вы можете обратиться к ним из Официальный веб-сайт углового материала.
На этом я бы хотел закончить свой блог. Надеюсь, вам понятны основы Angular Material.Если у вас есть какие-либо сомнения или вопросы относительно этой статьи, не стесняйтесь размещать их в разделе комментариев ниже.
Если вы хотите узнать все, что вы только что узнали из этого блога, и больше о Угловой , и направьте свою карьеру на опытного разработчика Angular, а затем подумайте о регистрации в нашем ' .
Есть вопрос к нам? Пожалуйста, отметьте это в разделе комментариев этого блога «Angular Material», и мы свяжемся с вами как можно скорее.