See artikkel on masintõlke peegelartikkel, palun klõpsake siia, et hüpata algse artikli juurde.

Vaade: 14328|Vastuse: 0

[Nurgeline] Angular6 Material2 kapseldab teavitussõnumi kasti

[Kopeeri link]
Postitatud 22.11.2018 15:00:49 | | | |
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)

Skoor

Osalejate arv1MB+1 Aitavad kaasa+1 Ahenda põhjus
kil + 1 + 1 See aitas mind väga

Vaata kõiki hinnanguid





Eelmine:Kuidas Jekins juurutab .NET Frameworki projekti
Järgmine:【Kõnekursus】Kuula kõnet Tsinghua Ülikoolis
Disclaimer:
Kõik Code Farmer Networki poolt avaldatud tarkvara, programmeerimismaterjalid või artiklid on mõeldud ainult õppimiseks ja uurimistööks; Ülaltoodud sisu ei tohi kasutada ärilistel ega ebaseaduslikel eesmärkidel, vastasel juhul kannavad kasutajad kõik tagajärjed. Selle saidi info pärineb internetist ning autoriõiguste vaidlused ei ole selle saidiga seotud. Ülaltoodud sisu tuleb oma arvutist täielikult kustutada 24 tunni jooksul pärast allalaadimist. Kui sulle programm meeldib, palun toeta originaaltarkvara, osta registreerimist ja saa paremaid ehtsaid teenuseid. Kui esineb rikkumist, palun võtke meiega ühendust e-posti teel.

Mail To:help@itsvse.com