Hoekig materiaal
Material Design, Chinese naam: Material Design Language, is een nieuwe designtaal gelanceerd door Google, die volgens Google bedoeld is om een consistenter en bredere "look and feel" te bieden voor mobiele telefoons, tablets, desktops en "andere platforms".
Volgens Google is Material Design gebaseerd op "echte aanraking, geïnspireerd door de studie van papier en inkt," en kan het gebruikers in staat stellen "de visuele aanwijzingen te begrijpen die de echte wereld vervangen" "zonder tegen de principes van de mechanica in te gaan". Daarnaast zijn de basisprincipes van licht, oppervlak en beweging essentieel om weer te geven hoe objecten bewegen, interageren en bestaan in de ruimte ten opzichte van elkaar. Realistische licht- en schaduweffecten tonen de naden tussen blokken, verdelen ruimtes en markeren bewegende delen. Voor een meer gedetailleerde introductie, bezoek alstublieft de officiële website van MaterialDe hyperlink-login is zichtbaar.。
Angular Material is een set Angular2+ UI-frameworks die perfect zijn geïmplementeerd door het Angular-team op basis van de Material-specificatie, het officiële websiteadres:De hyperlink-login is zichtbaar.
Dit artikel gebruikt de MatSnackBar-component van Angular Material om een waarschuwingsbox te encapsuleren; laten we eerst naar de renderings kijken:
Stap 1: Installeer
Stap 2: Configureer de animatie
Zodra het animatiepakket is geïnstalleerd, importeer je de BrowserAnimationsModule in je applicatie om animatieondersteuning in te schakelen.
app.module.ts als volgt ingevoerd:
Stap 3: Importeer het thema
Het opnemen van thema's is noodzakelijk om alle kern- en themastijlen op je applicatie toe te passen.
Om te beginnen met kant-en-klare thema's, neem je wereldwijd een van de voor-gebouwde thema's van Angular Material op in je applicatie. Als je de Angular CLI gebruikt, kun je die instellenNaar styles.scss：
Als jijNiet gebruiktAngular CLI, dan<link>kan passerenJe elementen bevatten vooraf gebouwde thematische index.html.
Stap 4: Begin met het inkapselen van het waarschuwingsvak
Voer de /app/services-map in via het cmd-commando cd, en je kunt de map aanpassen volgens je eigen project en het Create Service-commando uitvoeren:
De TS-code is als volgt:
Stap 5: Configureer het promptbox in CSS-stijl
In het projectStyles.scssVoeg onderaan het bestand de volgende stijl toe, die aangepast kan worden aan je werkelijke situatie! De code is als volgt:
Stap 6: Gebruik het waarschuwingsvak
Ik neem de logininterface als voorbeeld en importeer die in login.module.tsWaarschuwingsdienstenMatSnackBarModuleComponentmodules, als volgt:
Gebruikt in login.component.ts component is de code als volgt:
MatSnackBar-component api-documentatie:De hyperlink-login is zichtbaar.
(Einde)
|
Geplaatst op 22-11-2018 15:00:49
|
|
|
|
