[Kantet] Angular6 Material2 kapsler inn varslingsmeldingsboksen

Kantete materiale Material Design, kinesisk navn: Material Design Language, er et nytt designspråk lansert av Google, som Google sier er designet for å gi et mer konsistent og bredere «utseende og følelse» for mobiltelefoner, nettbrett, stasjonære PC-er og «andre plattformer». Ifølge Google er Material Design basert på «ekte berøring, inspirert av studiet av papir og blekk», og kan la brukere «forstå de visuelle signalene som brukes for å erstatte den virkelige verden» «uten å gå imot mekanikkens prinsipper». I tillegg er de grunnleggende prinsippene lys, overflate og bevegelse nøkkelen til å representere hvordan objekter beveger seg, samhandler og eksisterer i rommet i forhold til hverandre. Realistiske lys- og skyggeeffekter viser sømmene mellom blokkene, deler opp rom og markerer bevegelige deler. For en mer detaljert introduksjon, vennligst besøk den offisielle nettsiden til MaterialInnloggingen med hyperkoblingen er synlig.。 Angular Material er et sett med Angular2+ UI-rammeverk perfekt implementert av Angular-teamet basert på Material-spesifikasjonen, den offisielle nettsideadressen:Innloggingen med hyperkoblingen er synlig. Denne artikkelen bruker Angular Materials MatSnackBar-komponent for å innkapsle en varslingsboks, la oss først se på gjengivelsene: Trinn 1: Installer Innlogging er synlig. Trinn 2: Konfigurer animasjonen Når animasjonspakken er installert, importer BrowserAnimationsModule til applikasjonen din for å aktivere animasjonsstøtte. app.module.ts import som følger: Innlogging er synlig. Trinn 3: Importer temaet Å inkludere temaer er nødvendig for å anvende alle kjerne- og temastiler i applikasjonen din. For å komme i gang med ferdigbygde temaer, inkluder ett av de forhåndsbygde temaene til Angular Material globalt i applikasjonen din. Hvis du bruker Angular CLI, kan du sette det opptil styles.scss： Innlogging er synlig. Hvis duIkke bruktAngular CLI, da<link>kan passereElementene dine inneholder forhåndsbygde tematiske index.html. Trinn 4: Begynn å kapsle inn varslingsboksen Skriv inn /app/services-katalogen via cmd-kommandoen cd, og du kan endre katalogen i henhold til ditt eget prosjekt og utføre Create Service-kommandoen: Innlogging er synlig. TS-koden er som følger: Innlogging er synlig. Trinn 5: Konfigurer promptboksen i CSS-stil I prosjektetstyles.scssNederst i filen legger du til følgende stil, som kan tilpasses etter din faktiske situasjon! Koden er som følger: Innlogging er synlig. Trinn 6: Bruk varslingsboksen Jeg tar innloggingsgrensesnittet som et eksempel og importerer det i login.module.tsVarslingstjenesteogMatSnackBarModuleKomponentmoduler, som følger: Innlogging er synlig. Brukt i login.component.ts komponent er koden som følger: Innlogging er synlig. MatSnackBar-komponent api-dokumentasjon:Innloggingen med hyperkoblingen er synlig. (Slutt)

Score

Antall deltakere1	MB+1	bidra+1	Sammenbrudd grunn
kil	+ 1	+ 1	Det hjalp meg mye

Se alle vurderinger