Угловой материал
Material Design, китайское название: Material Design Language, — это новый язык дизайна, запущенный Google, который, по словам Google, предназначен для обеспечения более последовательного и широкого «внешнего вида и ощущения» для мобильных телефонов, планшетов, настольных компьютеров и «других платформ».
По данным Google, Material Design основан на «реальном прикосновении, вдохновлённом изучением бумаги и чернил», и позволяет пользователям «понимать визуальные подсказки, используемые для замены реального мира», «не нарушая принципы механики». Кроме того, основные принципы света, поверхности и движения являются ключевыми для представления того, как объекты движутся, взаимодействуют и существуют в пространстве относительно друг друга. Реалистичные эффекты света и тени показывают швы между блоками, разделяют пространства и отмечают движущиеся части. Для более подробного знакомства посетите официальный сайт MaterialВход по гиперссылке виден.。
Angular Material — это набор UI-фреймворков Angular2+, идеально реализованных командой Angular на основе спецификации Material, официальный адрес сайта:Вход по гиперссылке виден.
В этой статье используется компонент MatSnackBar от Angular Material для инкапсуляции оповещения, давайте сначала рассмотрим рендеры:
Шаг 1: Установка
Шаг 2: Настройте анимацию
После установки пакета анимации импортируйте BrowserAnimationsModule в ваше приложение для поддержки анимации.
app.module.ts импортировать следующим образом:
Шаг 3: Импортируйте тему
Включение тем необходимо для применения всех основных и тематических стилей в вашем приложении.
Чтобы начать с готовых тем, включите одну из готовых тем Angular Material глобально в вашу заявку. Если вы используете Angular CLI, вы можете настроить егона styles.scss：
Если тыНе используетсяУгловой CLI, тогда<link>может проходитьВаши элементы содержат заранее созданные тематические index.html.
Шаг 4: Начните инкапсулировать окно оповещений
Введите каталог /app/services через команду cmd cd, и вы сможете изменить каталог по своему проекту и выполнить команду Create Service:
Код ts выглядит следующим образом:
Шаг 5: Настройте CSS-стиль запросов
В проектеstyles.scssВнизу файла добавьте следующий стиль, который можно изменить в зависимости от вашей конкретной ситуации! Код таков:
Шаг 6: Используйте окно оповещений
Я беру интерфейс входа в качестве примера и импортирую его в login.module.tsСлужба оповещенияиMatSnackBarModuleКомпонентные модули, следующие как следующие:
Используемый в login.component.ts компоненте, код выглядит следующим образом:
Документация компонентного API MatSnackBar:Вход по гиперссылке виден.
(Конец)
|
Опубликовано 22.11.2018 15:00:49
|
|
|
|
