Uhlový materiál
Material Design, čínsky názov: Material Design Language, je nový dizajnový jazyk uvedený spoločnosťou Google, ktorý Google tvrdí, že je navrhnutý tak, aby poskytol konzistentnejší a širší "vzhľad a pocit" pre mobilné telefóny, tablety, stolné počítače a "iné platformy".
Podľa Googlu je Material Design založený na "skutočnom dotyku, inšpirovanom štúdiom papiera a atramentu" a umožňuje používateľom "pochopiť vizuálne podnety používané na nahradenie reálneho sveta" "bez toho, aby sa porušovali princípy mechaniky". Okrem toho sú základné princípy svetla, povrchu a pohybu kľúčové pre zobrazenie toho, ako sa objekty pohybujú, interagujú a existujú v priestore vo vzťahu k sebe navzájom. Realistické svetelné a tieňové efekty ukazujú spoje medzi blokmi, rozdeľujú priestory a označujú pohyblivé časti. Pre podrobnejší úvod navštívte prosím oficiálnu webovú stránku MaterialPrihlásenie na hypertextový odkaz je viditeľné.。
Angular Material je sada Angular2+ UI frameworkov, ktoré tím Angular dokonale implementoval na základe špecifikácie Material, oficiálnej webovej adresy:Prihlásenie na hypertextový odkaz je viditeľné.
Tento článok využíva komponent MatSnackBar od Angular Material na uzavretie upozornenia, najprv sa pozrime na vizualizácie:
Krok 1: Inštalácia
Krok 2: Nastavte animáciu
Keď je animačný balík nainštalovaný, importujte BrowserAnimationsModule do svojej aplikácie, aby ste povolili podporu animácií.
app.module.ts význam nasledovne:
Krok 3: Importujte tému
Zahrnutie tém je nevyhnutné na aplikáciu všetkých základných a tematických štýlov.
Ak chcete začať s predpripravenými témami, zahrňte jednu z predpripravených tém Angular Material globálne do svojej aplikácie. Ak používate Angular CLI, môžete si ho nastaviťto styles.scss：
Ak tyNepoužitéAngular CLI, potom<link>môže prejsťVaše prvky obsahujú predpripravené tematické index.html.
Krok 4: Začnite zapuzdrovať výstražné okno
Vstúpte do adresára /app/services cez príkaz cmd cd a môžete adresár upraviť podľa svojho projektu a spustiť príkaz Create Service:
TS kód je nasledovný:
Krok 5: Nakonfigurujte prompt box v štýle CSS
V projektestyles.scssNa spodok súboru pridajte nasledujúci štýl, ktorý môžete upraviť podľa vašej skutočnej situácie! Kód je nasledovný:
Krok 6: Použite upozornenie
Ako príklad beriem prihlasovacie rozhranie a importujem ho do login.module.tsVýstražná službaaMatSnackBarModulKomponentné moduly, nasledovné:
V login.component.ts komponente je kód nasledovný:
Dokumentácia API komponentov MatSnackBar:Prihlásenie na hypertextový odkaz je viditeľné.
(Koniec)
|
Zverejnené 22. 11. 2018 15:00:49
|
|
|
|
