Matériau angulaire
Material Design, nom chinois : Material Design Language, est un nouveau langage de design lancé par Google, que Google affirme être conçu pour offrir un « look and feel » plus cohérent et plus large pour les téléphones mobiles, tablettes, ordinateurs de bureau et « autres plateformes ».
Selon Google, Material Design repose sur un « toucher réel, inspiré par l’étude du papier et de l’encre », et permet aux utilisateurs de « comprendre les indices visuels utilisés pour remplacer le monde réel » « sans aller à l’encontre des principes de la mécanique ». De plus, les principes de base de la lumière, de la surface et du mouvement sont essentiels pour représenter comment les objets se déplacent, interagissent et existent dans l’espace en relation les uns avec les autres. Des effets réalistes de lumière et d’ombre montrent les coutures entre les blocs, divisent les espaces et marquent les parties mobiles. Pour une introduction plus détaillée, veuillez consulter le site officiel de MaterialLa connexion hyperlientérée est visible.。
Angular Material est un ensemble de frameworks d’interface Angular2+ parfaitement implémentés par l’équipe Angular sur la base de la spécification Material, l’adresse officielle du site web :La connexion hyperlientérée est visible.
Cet article utilise le composant MatSnackBar d’Angular Material pour encapsuler une boîte d’alerte, regardons d’abord les rendus :
Étape 1 : Installation
Étape 2 : Configurez l’animation
Une fois le paquet d’animation installé, importez le module BrowserAnimations dans votre application pour activer la prise en charge de l’animation.
app.module.ts importent comme suit :
Étape 3 : Importez le thème
Inclure des thèmes est nécessaire pour appliquer tous les styles de base et de thèmes à votre application.
Pour débuter avec des thèmes prédéfinis, incluez l’un des thèmes prédéfinis d’Angular Material dans votre application au niveau mondial. Si vous utilisez la CLI Angular, vous pouvez la configurervers styles.scss：
Si vousNon utiliséCLI angulaire, alors<link>peut passerVos éléments contiennent des index.html thématiques pré-construites.
Étape 4 : Commencez à encapsuler la boîte d’alerte
Entrez le répertoire /app/services via le cd de commande cmd, et vous pouvez modifier le répertoire selon votre propre projet et exécuter la commande Create Service :
Le code ts est le suivant :
Étape 5 : Configurez la boîte d’invite en style CSS
Dans le projetstyles.scssEn bas du dossier, ajoutez le style suivant, qui peut être modifié selon votre situation réelle ! Le code est le suivant :
Étape 6 : Utilisez la boîte d’alerte
Je prends l’interface de connexion comme exemple et je l’importe dans login.module.tsService d’alerteetModule MatSnackBarBarreMModules composants, comme suit :
Utilisé dans login.component.ts composante, le code est le suivant :
Documentation de l’API des composants MatSnackBar :La connexion hyperlientérée est visible.
(Fin)
|
Publié sur 22/11/2018 15:00:49
|
|
|
|
