Materiał kątowy
Material Design, chińska nazwa: Material Design Language, to nowy język projektowy wprowadzony przez Google, który według Google został zaprojektowany, aby zapewnić bardziej spójny i szerszy "wygląd i odczucie" dla telefonów komórkowych, tabletów, komputerów stacjonarnych oraz "innych platform".
Według Google, Material Design opiera się na "prawdziwym dotyku, inspirowanym studiowaniem papieru i tuszu" i pozwala użytkownikom "zrozumieć wizualne wskazówki używane do zastąpienia prawdziwego świata" "bez naruszania zasad mechaniki". Ponadto podstawowe zasady światła, powierzchni i ruchu są kluczowe dla przedstawienia, jak obiekty poruszają się, oddziałują i istnieją w przestrzeni względem siebie. Realistyczne efekty światła i cienia pokazują szwy między blokami, dzielą przestrzenie i oznaczają ruchome części. Aby uzyskać bardziej szczegółowe wprowadzenie, odwiedź oficjalną stronę MaterialLogowanie do linku jest widoczne.。
Angular Material to zestaw frameworków UI Angular2+ perfekcyjnie zaimplementowanych przez zespół Angular na podstawie specyfikacji Material, oficjalnego adresu strony internetowej:Logowanie do linku jest widoczne.
Ten artykuł wykorzystuje komponent MatSnackBar firmy Angular Material do zahalenia okna alertu, najpierw przyjrzyjmy się renderom:
Krok 1: Instalacja
Krok 2: Konfiguruj animację
Po zainstalowaniu pakietu animacji zaimportuj BrowserAnimationsModule do aplikacji, aby włączyć wsparcie dla animacji.
app.module.ts znaczenie następujące:
Krok 3: Zaimportuj motyw
Uwzględnienie motywów jest konieczne, aby zastosować wszystkie style rdzeniowe i tematyczne do aplikacji.
Aby zacząć z gotowymi motywami, uwzględnij jeden z gotowych motywów Angular Material globalnie w swojej aplikacji. Jeśli używasz Angular CLI, możesz to skonfigurowaćdo styles.scss：
Jeśli tyNie używaneAngular CLI, wtedy<link>może zdaćTwoje elementy zawierają gotowe tematyczne index.html.
Krok 4: Zacznij kapsułować okno alarmowe
Wprowadź katalog /app/services przez polecenie cmd cd, a możesz modyfikować katalog zgodnie z własnym projektem i wykonać polecenie Create Service:
Kod ts wygląda następująco:
Krok 5: Skonfiguruj prompt box w stylu CSS
W projekciestyles.scssNa dole pliku dodaj następujący styl, który można dostosować do Twojej sytuacji! Kod jest następujący:
Krok 6: Użyj okna alertu
Biorę przykład interfejsu logowania i importuję go w login.module.tsSłużba alarmowaiMatSnackBarModuleModuły komponentowe, w następujący sposób:
Stosowany w login.component.ts komponencie, kod wygląda następująco:
Dokumentacja API komponentów MatSnackBar:Logowanie do linku jest widoczne.
(Koniec)
|
Opublikowano 22.11.2018 15:00:49
|
|
|
|
