Nurkmaterjal
Material Design, hiina keeles: Material Design Language, on Google'i käivitatud uus disainikeel, mille Google väidab olevat loodud pakkuma ühtsemat ja laiemat "välimust ja tunnetust" mobiiltelefonidele, tahvelarvutitele, lauaarvutitele ja "teistele platvormidele".
Google'i sõnul põhineb materjalidisain "päris puudutusel, inspireeritud paberi ja tindi uurimisest" ning võimaldab kasutajatel "mõista visuaalseid vihjeid, mida kasutatakse reaalse maailma asendamiseks" "ilma mehaanika põhimõtetega vastuollu minemata". Lisaks on valguse, pinna ja liikumise põhiprintsiibid võtmetähtsusega, et kujutada, kuidas objektid ruumis liikuvad, suhtlevad ja eksisteerivad üksteise suhtes. Realistlikud valgus- ja varjuefektid näitavad plokkide vahelisi õmblusi, jagavad ruume ja märgivad liikuvaid osi. Põhjalikuma sissejuhatuse saamiseks külastage palun Materjali ametlikku veebilehteHüperlingi sisselogimine on nähtav.。
Angular Material on Angular2+ kasutajaliidese raamistike komplekt, mille Angular meeskond on täiuslikult rakendanud materjali spetsifikatsiooni alusel, mis on ametlik veebiaadress:Hüperlingi sisselogimine on nähtav.
See artikkel kasutab Angular Materiali MatSnackBar komponenti teavituskasti kapseldamiseks, vaatame esmalt renderduseid:
1. samm: Paigalda
2. samm: Seadista animatsioon
Kui animatsioonipakett on paigaldatud, impordi BrowserAnimationsModule oma rakendusse, et aktiveerida animatsiooni tugi.
app.module.ts import järgmiselt:
3. samm: Impordi teema
Teemade kaasamine on vajalik, et rakendada kõiki põhi- ja teemastiile oma rakendusele.
Et alustada eelvalmistatud teemadega, lisa oma rakendusse üks Angular Materiali eelvalmistatud teemadest globaalselt. Kui kasutad Angular CLI-d, saad selle seadistadaaadressile styles.scss:
Kui saKasutamataNurkne juhtimissüsteem, siis<link>võib mööda minnaSinu elemendid sisaldavad eelnevalt koostatud temaatilist index.html.
4. samm: Alusta hoiatuskasti kapseldamist
Sisesta /app/services kausta cmd käsu cd-ga ja saad kausta muuta vastavalt oma projektile ning käivitada käsu Create Service:
TS-kood on järgmine:
5. samm: Seadista prompt box CSS-stiilis
Projektisstyles.scssFaili lõppu lisa järgmine stiil, mida saab vastavalt oma tegelikule olukorrale muuta! Kood on järgmine:
6. samm: Kasuta teavituskasti
Võtan näiteks sisselogimisliidese ja impordin selle login.module.tsHäireteenusjaMatSnackBarModuleKomponendimoodulid on järgmised:
login.component.ts komponendis kasutatakse koodi järgmiselt:
MatSnackBari komponendi API dokumentatsioon:Hüperlingi sisselogimine on nähtav.
(Lõpp)
|