[Ъглова] 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 стила на прозореца В проектаstyles.scssВ долната част на файла добавете следния стил, който може да бъде променян според вашата реална ситуация! Кодът е следният: Входът е видим. Стъпка 6: Използвайте кутията за известие Вземам интерфейса за вход за пример и го импортирам в login.module.tsAlert ServiceиMatSnackBarModuleКомпонентни модули, както следва: Входът е видим. Използван в login.component.ts компонент, кодът е следният: Входът е видим. Документация на компонентния API на MatSnackBar:Входът към хиперлинк е видим. (Край)

Резултат

Брой участници1	MB+1	допринасям+1	Срив причина
KIL	+ 1	+ 1	Много ми помогна

Вижте всички оценки