Leņķa materiāls
Materiālu dizains, ķīniešu nosaukums: Material Design Language, ir jauna dizaina valoda, ko uzsāka Google, kas, pēc Google domām, ir izstrādāta, lai nodrošinātu konsekventāku un plašāku "izskatu un sajūtu" mobilajiem tālruņiem, planšetdatoriem, galddatoriem un "citām platformām".
Saskaņā ar Google, materiālu dizains ir balstīts uz "reālu pieskārienu, iedvesmojoties no papīra un tintes izpētes", un tas spēj ļaut lietotājiem "saprast vizuālās norādes, kas tiek izmantotas, lai aizstātu reālo pasauli", "nepārkāpjot mehānikas principus". Turklāt gaismas, virsmas un kustības pamatprincipi ir atslēga, lai attēlotu, kā objekti pārvietojas, mijiedarbojas un pastāv telpā attiecībā viens pret otru. Reālistiski gaismas un ēnu efekti parāda šuves starp blokiem, sadala telpas un iezīmē kustīgās daļas. Lai iegūtu detalizētāku ievadu, lūdzu, apmeklējiet oficiālo vietni MateriālsHipersaites pieteikšanās ir redzama.。
Angular Material ir Angular2+ UI ietvaru kopums, ko lieliski ieviesusi Angular komanda, pamatojoties uz Material specifikāciju, oficiālo vietnes adresi:Hipersaites pieteikšanās ir redzama.
Šajā rakstā tiek izmantots Angular Material MatSnackBar komponents, lai iekapsulētu brīdinājuma lodziņu, vispirms apskatīsim renderējumus:
1. darbība: instalēšana
2. darbība: konfigurējiet animāciju
Kad animācijas pakotne ir instalēta, importējiet BrowserAnimationsModule savā lietojumprogrammā, lai iespējotu animācijas atbalstu.
app.module.ts importu šādi:
3. darbība: dizaina importēšana
Tēmu iekļaušana ir nepieciešama, lai lietojumprogrammai piemērotu visus pamata un dizaina stilus.
Lai sāktu darbu ar iepriekš izveidotām tēmām, iekļaujiet savā lietojumprogrammā vienu no iepriekš izveidotajām Angular Material tēmām visā pasaulē. Ja izmantojat Angular CLI, varat to iestatītuz styles.scss:
Ja jūsNetiek izmantotsLeņķa CLI, tad<link>var izietJūsu elementi satur iepriekš izveidotas tematiskas index.html.
4. darbība: sāciet brīdinājuma lodziņa iekapsulēšanu
Ievadiet direktoriju /app/services, izmantojot komandu cd cmd, un jūs varat modificēt direktoriju atbilstoši savam projektam un izpildīt komandu Izveidot pakalpojumu:
TS kods ir šāds:
5. darbība: uzvednes lodziņa CSS stila konfigurēšana
projektāstili.scssFaila apakšā pievienojiet šādu stilu, kuru var mainīt atbilstoši jūsu faktiskajai situācijai! Kods ir šāds:
6. darbība: izmantojiet brīdinājuma lodziņu
Es ņemu pieteikšanās interfeisu kā piemēru un importēju to login.module.tsbrīdinājuma pakalpojumsunMatSnackBar modulisKomponentu moduļi:
login.component.ts komponentā izmantotais kods ir šāds:
MatSnackBar komponentu API dokumentācija:Hipersaites pieteikšanās ir redzama.
(Beigas)
|