[Кутовий голос] Angular6 Material2 охоплює вікно повідомлень про сповіщення

Кутовий матеріал 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-стиль prompt box У проєктіstyles.scssВнизу файлу додайте такий стиль, який можна змінювати відповідно до вашої реальної ситуації! Код виглядає так: Вхід видно. Крок 6: Використайте вікно сповіщень Я беру інтерфейс входу як приклад і імпортую його в login.module.tsСлужба сповіщенняіMatSnackBarModuleКомпонентні модулі, а саме: Вхід видно. Використовується в login.component.ts компоненті, код виглядає так: Вхід видно. Документація API компонентів MatSnackBar:Вхід за гіперпосиланням видно. (Кінець)

Забити

Кількість учасників1	МБ+1	Сприяють+1	Колапс причина
кіл	+ 1	+ 1	Це мені дуже допомогло

Переглянути всі рейтинги