Material unghiular
Material Design, al cărui nume chinezesc: Material Design Language, este un nou limbaj de design lansat de Google, despre care Google spune că este conceput pentru a oferi un "aspect și senzație" mai consecvent și mai larg pentru telefoanele mobile, tabletele, desktopurile și "alte platforme".
Potrivit Google, Material Design se bazează pe "atingere reală, inspirată de studiul hârtiei și cernelii" și permite utilizatorilor să "înțeleagă indiciile vizuale folosite pentru a înlocui lumea reală" "fără a încălca principiile mecanicii". În plus, principiile de bază ale luminii, suprafeței și mișcării sunt esențiale pentru a reprezenta modul în care obiectele se mișcă, interacționează și există în spațiu în raport unul cu celălalt. Efectele realiste de lumină și umbră arată îmbinările dintre blocuri, separă spațiile și marchează părțile în mișcare. Pentru o introducere mai detaliată, vă rugăm să vizitați site-ul oficial al MaterialAutentificarea cu hyperlink este vizibilă.。
Angular Material este un set de cadre UI Angular2+ implementate perfect de echipa Angular, pe baza specificației Material, adresa oficială a site-ului:Autentificarea cu hyperlink este vizibilă.
Acest articol folosește componenta MatSnackBar de la Angular Material pentru a încapsula o cutie de alertă, să vedem mai întâi randările:
Pasul 1: Instalare
Pasul 2: Configurează animația
Odată ce pachetul de animație este instalat, importă BrowserAnimationsModule în aplicația ta pentru a activa suportul pentru animații.
app.module.ts importă după cum urmează:
Pasul 3: Importă tema
Includerea temelor este necesară pentru a aplica toate stilurile de bază și de temă aplicației tale.
Pentru a începe cu teme predefinite, include una dintre temele predefinite ale Angular Material la nivel global în aplicația ta. Dacă folosești CLI-ul Angular, îl poți configuracătre styles.scss：
Dacă tuNeutilizatCLI unghiular, atunci<link>poate treceElementele tale conțin index.html tematice predefinite.
Pasul 4: Începe să încapsulezi cutia de alertă
Introduceți directorul /app/services prin comanda cmd cd și puteți modifica directorul conform propriului proiect și puteți executa comanda Create Service:
Codul ts este următorul:
Pasul 5: Configurează cutia de prompt în stil CSS
În proiectstyles.scssÎn partea de jos a fișierului, adaugă următorul stil, care poate fi modificat în funcție de situația ta reală! Codul este următorul:
Pasul 6: Folosește cutia de alertă
Iau interfața de autentificare ca exemplu și o import în login.module.tsServiciu de alertășiMatSnackBarModuleModule componente, după cum urmează:
Folosit în login.component.ts componentă, codul este următorul:
Documentația API-ului componentelor MatSnackBar:Autentificarea cu hyperlink este vizibilă.
(Sfârșit)
|
Postat pe 22.11.2018 15:00:49
|
|
|
|
