Les composants UI / UX dans Angular sont appelés Matériaux angulaires. Ilsaider les applications angulaires à effectuer efficacement . Cependant, si vous ne les connaissez pas encore, voici un article pour vous aider à apprendre en détail les matériaux angulaires. Aussi, to acquérir une connaissance approfondie d'Angular, envisagez de vous inscrire à ' d'Edureka.
Dans cet article, je reviendrai sur les sujets suivants:
- Introduction aux matériaux angulaires
- Installation de matériau angulaire
- Composants matériels angulaires
- Matériau angulaire CDK
Introduction aux matériaux angulaires
Matériaux ont été introduits en tant que langage de conception développé par Google en 2014. Conception matérielle est un outilpour les frameworks frontaux, ce qui vous aide à visuel , mouvement , et interaction conception. Il vous aide également à vous adapter sur différents appareils et différentes tailles d'écran. Tout d'abord, il a été tagué sur AngularJS pour rendre ces applications plus attrayant et performer Plus vite . Ensuite, Google a complètement réécrit le code à partir de zéro et a supprimé JS i.e. , et je l'ai nommé en septembre 2016. Plus tard, Google a étiqueté le Material Design en Angular, qui utilise , et l'a nommé Angular Materials.
Matériaux angulaires ou des composants d'interface utilisateur (UI) vous aident à concevoir votre application dans un structuré manière. Ils attirent les utilisateurs et le font plus facile d'accès les éléments ou les composants présents dans votre application. Ils aident également à concevoir vos applications de manière attrayante, avec des modes et formes . Ces composants aident à rendre votre application plus cohérent , vite , polyvalent et même design sensible sites Internet.
Installation de matériau angulaire
Commençons maintenant par un rapide didacticiel sur l'installation des matériaux angulaires. Tout d'abord, assurez-vous que Angular est installé sur votre système. Si vous n'êtes pas familier avec Angular, reportez-vous au lien sur . Une fois que tout est configuré, vous pouvez ajouter des matériaux angulaires à votre projet à l'aide de la commande suivante:
d'ajout @ angulaire / matériau
Tout d'abord, il vous demandera de choisir un nom de thème prédéfini ou un thème personnalisé.
Vous devez choisir le thème prédéfini «Indigo / Rose» qui est le thème par défaut pour styliser votre application. Vous pouvez également choisir le thème «Personnalisé» afin de personnaliser vos fichiers de thème qui incluent tous les styles courants.
Ensuite, il vous demandera de configurer HammerJS . HammerJS est une bibliothèque populaire, principalement utilisée dans les applications angulaires. Il ajoute la prise en charge des gestes tactiles tels que Swipe, Pan, Pinch, Rotate et bien d'autres, en particulier dans les applications mobiles.
Vous pouvez choisir «Oui» ou «Non». HammerJS peut être utile lorsque vous utilisez votre application sur des mobiles. Les mobiles proposant des écrans tactiles, ces gestes sont plus utiles et peuvent paraître à la mode dans votre application mobile.
Après avoir choisi votre choix, il vous demandera ensuite de configurer Animations du navigateur pour le matériau angulaire.
Vous devez choisir «Oui» pour pouvoir utiliser des animations sur votre application. Les animations angulaires rendent votre application plus amusante et plus facile à utiliser. Cela peut améliorer votre application et votre expérience utilisateur, ce qui attire l'attention des utilisateurs.
Par la suite, cela installera Angular Materials dans votre application.
Composants matériels angulaires
Comme mentionné précédemment, les composants matériels angulaires ne sont rien d'autre que UI / UX Composants de conception. Ils contiennent une gamme variée de composants tels que les contrôles de formulaire, la navigation, les boutons et indicateurs, les fenêtres contextuelles et bien d'autres. Ces composants vous aident à implémenter des modèles conformément à la spécification Material Design.
À l'avenir, voyons quelques exemples de mise en œuvre de ces composants dans votre application angulaire.
La navigation
Tout d'abord, je vais discuter des composants de Navigation.
- Barre d'outils
Vous devez taper le code suivant dans le app.component.html pour utiliser le composant Toolbar dans votre application.
Didacticiel sur les matériaux angulaires est un conteneur de matériau angulaire utilisé pour les en-têtes et les titres. La couleur du le conteneur peut être modifié en utilisant le Couleur propriété.Par défaut, les barres d'outils utilisent une couleur d'arrière-plan neutre basée sur le thème actuel, c'est-à-dire clair ou foncé.Vous pouvez choisir trois thèmes par défaut qui sont: 'primaire' , 'accent' , ou 'prévenir' .Pour utiliser cette barre d'outils, vous devez d'abord l'importer dans app.module.ts fichier à partir de matériaux angulaires à l'aide de la commande suivante:
importer {MatToolbarModule} depuis '@ angular / material'Plus tard, vous devrez également ajouter ce module dans le importations: [] section située dans le app.module.ts fichier.
importations: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Pour Mat-Toolbar, vous devez ajouter ' MatToolbarModule ».
À présent, diffusons votre projet à l'aide de la commande suivante:
de servir -o
Cela ouvrira votre projet sur le navigateur par défaut de votre système comme indiqué ci-dessous:
Si vous souhaitez changer la couleur de la barre d'outils selon votre choix, vous pouvez le faire à l'aide de la feuille de style CSS. Permettez-moi de vous montrer un exemple.
Tout d'abord, vous devez effacer Couleur propriété de conteneur, puis tapez ce qui suit CSS code dans le app.component.css fichier.
mat-toolbar {background-color: / * couleur-de-votre-choix * / couleur: / * texte-couleur * /}Maintenant, diffusez votre projet pour voir le résultat.
- Menu
Ensuite, je vais discuter du composant Menu. Vous devez taper le code suivant dans votre app.component.html fichier.
Didacticiel sur les matériaux angulaires Aide sur les paramètres du menuAjoutons du style sur le Menu bouton. Vous devez taper le code suivant dans votre app.component.css fichier.
.space {flex: 1 1 auto} .btns {largeur: 100px hauteur: 40px taille de police: grand rayon de bordure: 10px bordure: 3px solide # 113c89 couleur de fond: lightcoral}class = 'espace' est utilisé pour ajouter un espacement entre «Nom de la barre d'outils» et «Option de menu».
Dans le cas où vous n'êtes pas familier avec la feuille de style CSS, vous pouvez vous référer à notre blog sur pour approfondir.
Tout comme la barre d'outils, à utiliser et conteneurs, vous devez suivre la même procédure que ci-dessus, pour importer MatMenuModule et MatButtonModule de matériau angulaire et ajoutez-les dans importations: [] section située dans app.module.ts fichier.
Servez votre projet maintenant pour afficher la sortie.
Contrôles de formulaire
Maintenant, je vais discuter des composants dans le contrôle de formulaire.
- Champ de formulaire
Comme son nom l'indique, Form-Field est utilisé pour les entrées données par l'utilisateur. Il est le plus couramment utilisé pour l'enregistrement d'un utilisateur, dans une application ou un site Web.
Vous devez taper le code suivant dans le app.component.html pour utiliser le composant Form-Field dans votre application.
Contrôles de formulaire
Nom
Comme d'habitude, vous devez importer MatFormFieldModule et MatInputModule et ajoutez-les dans importations: [] section située dans le app.module.ts fichier. Le code ci-dessus est généralement utilisé pour saisir des noms tels que «Prénom», «Nom de famille», etc. Vous pouvez même utiliser des validateurs et rendre un champ obligatoire. Par exemple, vous pouvez l'utiliser pour le champ E-mail. Vous pouvez masquer ou afficher le texte des mots de passe. Pour votre référence, consultez le code ci-dessous:
Saisissez votre adresse e-mail {{getErrorMessage ()}} Saisissez votre mot de passe {{hide? 'visibilité_off': 'visibilité'}}Dans ton app.component.css fichier, vous devez ajouter le code suivant:
.example-container {padding-left: 50px}Maintenant, dans votre app.component.ts fichier, vous devez importer FormControl et Validateurs de @ angulaire / formes annuaire.
importer {FormControl, Validators} depuis '@ angular / forms'Vous devez même ajouter le texte pour afficher une erreur dans la classe suivante.
classe d'exportation AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Vous devez entrer une valeur': this.email.hasError ('email')? 'Pas un e-mail valide': ''} hide = true}En vous référant à la procédure ci-dessus, vous devez taper le code suivant dans votre app.module.ts fichier pour importer les modules nécessaires.
import {FormsModule, ReactiveFormsModule} depuis '@ angular / forms' import {MatIconModule} depuis '@ angular / material'Plus tard, vous devrez ajouter ces modules dans importations: [] section.
- Bouton radio
Les boutons radio sont généralement utilisés pour choisir un choix parmi les différentes options. Vous pouvez consulter le code suivant pour référence.
Pour app.component.html fichier,
Le sexe
Homme Femme
Pour app.component.css fichier,
bouton radio mat {Padding-left: 50px}Maintenant, vous devez importer MatRadioModule et ajoutez-le importations: [] section située dans le app.module.ts fichier.
Plus tard, vous devrez servir votre projet pour afficher la sortie.
À l'avenir, je discuterai du CDK Angular Material.
Matériau angulaire CDK
CDK, également connu sous le nom de Kit de développement de composants , est une bibliothèque de comportements prédéfinis en matériau angulaire, qui est un ensemble d'outils qui implémentent des modèles d'interaction et fonctionnalités de l'application . Il n'a pas de style spécifique à Material Design. Voyons un exemple de CDK.
- Champ de texte
Le composant Champ de texte fournit des utilitaires pour travailler avec des champs de saisie de texte. Vous pouvez utiliser les composants CDK sur le champ de texte pour redimensionner les entrées. Voyons un exemple de sa mise en œuvre.
Pour app.component.html fichier,
Matériau angulaire CDK
Taille de la police 10px 12px 14px 16px 18px 20px Taille automatique du texte
Pour le app.component.ts fichier, vous devez d'abord importer les composants nécessaires.
import {CdkTextareaAutosize} depuis '@ angular / cdk / text-field' import {NgZone, ViewChild} depuis '@ angular / core' import {take} depuis 'rxjs / operators'Maintenant, vous devez taper le code suivant dans la classe.
comment écrire un scanner en java
classe d'exportation AppComponent {constructeur (_ngZone privé: NgZone) {} @ViewChild ('autosize', {statique: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Ensuite, vous devez importer MatSelectModule et ajoutez-le importations: [] section située dans le app.module.ts fichier.
Enfin, vous devez servir votre projet pour afficher la sortie.
Ce n'est pas la conclusion et il existe plusieurs autres composants dans les matériaux angulaires. Vous pouvez vous y référer à partir du site officiel de matériau angulaire.
Avec cela, je voudrais terminer mon blog. J'espère que vous êtes clair sur les principes fondamentaux du matériau angulaire.Si vous avez des doutes ou des questions concernant cet article, n'hésitez pas à les poster dans la section commentaires ci-dessous.
Si vous souhaitez apprendre tout ce que vous venez d'apprendre de ce blog, et plus sur Angulaire et orientez votre carrière vers un développeur angulaire compétent, puis envisagez de vous inscrire à notre ' .
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de ce blog «Matériel angulaire» et nous vous répondrons dans les plus brefs délais.