Vinkelmateriale
Material Design, kinesisk navn: Material Design Language, er et nyt designsprog lanceret af Google, som Google siger er designet til at give et mere ensartet og bredere "look and feel" for mobiltelefoner, tablets, desktops og "andre platforme".
Ifølge Google er Material Design baseret på "ægte berøring, inspireret af studiet af papir og blæk," og kan give brugerne mulighed for at "forstå de visuelle signaler, der bruges til at erstatte den virkelige verden" "uden at gå imod mekanikkens principper". Derudover er de grundlæggende principper om lys, overflade og bevægelse nøglen til at repræsentere, hvordan objekter bevæger sig, interagerer og eksisterer i rummet i forhold til hinanden. Realistiske lys- og skyggeeffekter viser samlingerne mellem blokkene, deler rum og markerer bevægelige dele. For en mere detaljeret introduktion, besøg venligst Material's officielle hjemmesideHyperlink-login er synlig.。
Angular Material er et sæt Angular2+ UI-frameworks, der er perfekt implementeret af Angular-teamet baseret på Material-specifikationen, den officielle hjemmesideadresse:Hyperlink-login er synlig.
Denne artikel bruger Angular Materials MatSnackBar-komponent til at indkapsle en alarmboks, lad os først se på renderingene:
Trin 1: Installer
Trin 2: Konfigurér animationen
Når animationspakken er installeret, importer BrowserAnimationsModule til din applikation for at aktivere animationsunderstøttelse.
app.module.ts import som følger:
Trin 3: Importer temaet
Inkludering af temaer er nødvendig for at anvende alle kerne- og temastilarter i din applikation.
For at komme i gang med forudbyggede temaer, inkluder et af de forudbyggede temaer for Angular Material globalt i din applikation. Hvis du bruger Angular CLI, kan du sætte det opTil styles.scss：
Hvis duIkke brugtAngular CLI, så<link>kan passereDine elementer indeholder forudbyggede tematiske index.html.
Trin 4: Begynd at indkapsle alarmboksen
Indtast /app/services-mappen via cmd-kommandoen cd, og du kan ændre mappen efter dit eget projekt og udføre Create Service-kommandoen:
TS-koden er som følger:
Trin 5: Konfigurer promptboksen i CSS-stil
I projektetstyles.scssNederst i filen tilføjer du følgende stil, som kan ændres efter din faktiske situation! Koden er som følger:
Trin 6: Brug alarmboksen
Jeg tager login-grænsefladen som eksempel og importerer den i login.module.tsAlarmtjenesteogMatSnackBarModuleKomponentmoduler, som følger:
Brugt i login.component.ts komponent er koden som følger:
MatSnackBar komponent api-dokumentation:Hyperlink-login er synlig.
(Slut)
|
Opslået på 22/11/2018 15.00.49
|
|
|
|
