Què és el material angular i com implementar-lo?

Els components UI / UX a Angular, es coneixen com a Materials angulars. Ellsajuda a funcionar les aplicacions angulars eficientment . Tanmateix, si encara no en sou conscients, aquí teniu un article per ajudar-vos a aprendre detalladament els materials angulars. A més, to Obteniu un coneixement profund d’Angular, penseu a inscriure-us-hi ' d’Edureka.

En aquest article, examinaré els temes següents:

• Introducció als materials angulars
• Instal·lació de material angular
• Components de material angular
  • Navegació
    1. Barra d'eines
    2. Menú
  • Controls de formulari
    1. Camp del formulari
    2. Botó d'opció
• CDK de material angular
  • Camp de text

Introducció als materials angulars

Materials es van introduir com a llenguatge de disseny desenvolupat per Google el 2014. Disseny de materials és una einaper a frameworks front-end, cosa que us ajuda visual , moviment , i interacció disseny. També us ajuda a adaptar-vos a diferents dispositius i mides de pantalla diferents. En primer lloc, es va etiquetar a AngularJS per millorar aquestes aplicacions atractiu i realitzar més ràpid . Després, Google va tornar a escriure completament el codi des de zero i va eliminar JS i.e. , i el va anomenar al setembre del 2016. Més tard, Google va etiquetar el Disseny de materials a Angular, que utilitza , i el va anomenar Materials Angulars.

Materials angulars o els components d’interfície d’usuari (IU) us ajuden a dissenyar la vostra aplicació a estructurat manera. Atreuen usuaris i ho aconsegueixen de més fàcil accés els elements o els components presents a la vostra aplicació. També ajuden a dissenyar les vostres aplicacions d’una manera atractiva i única estils i formes . Aquests components ajuden a millorar la vostra aplicació coherent , ràpid , versàtil i fins i tot disseny sensible llocs web.

Instal·lació de material angular

Comencem ara amb un tutorial ràpid sobre com instal·lar Angular Materials. Primer de tot, assegureu-vos que teniu instal·lat Angular al vostre sistema. Si no esteu familiaritzat amb Angular, consulteu l'enllaç a . Un cop hàgiu configurat tot, podeu afegir Angular Materials al vostre projecte mitjançant l'ordre següent:

d'add @ angular / material

En primer lloc, us demanarà que trieu un nom de tema predefinit o un tema personalitzat.

Heu de triar el tema predefinit 'Indigo / Pink', que és el tema predeterminat per donar estil a la vostra aplicació. També podeu triar el tema 'Personalitzat' perquè pugueu personalitzar els fitxers de tema que incloguin tots els estils habituals.

A continuació, us demanarà que configureu HammerJS . HammerJS és una biblioteca popular, principalment utilitzada en aplicacions Angular. Afegeix suport per a gestos tàctils com lliscar, panoramitzar, pessigar, girar i molts més, especialment en aplicacions mòbils.

Podeu triar 'Sí' o 'No'. HammerJS pot ser útil quan utilitzeu la vostra aplicació en mòbils. Com que els mòbils ofereixen pantalles tàctils, aquests gestos són més útils i poden semblar de moda a la vostra aplicació mòbil.

Després de triar la vostra elecció, a continuació us demanarà que la configureu Animacions del navegador per a material angular.

Heu de triar 'Sí' per poder utilitzar animacions a la vostra aplicació. Les animacions angulars fan que la vostra aplicació sigui més divertida i fàcil d’utilitzar. Això pot millorar l'aplicació i l'experiència d'usuari, cosa que atrau l'atenció dels usuaris.

Posteriorment, això instal·larà Angular Materials a la vostra aplicació.

Components de material angular

Com es va esmentar anteriorment, els components de material angular no són res més que IU / UX Components de disseny. Contenen una àmplia gamma de components, com ara controls de formulari, navegació, botons i indicadors, finestres emergents i molts més. Aquests components us ajuden a implementar patrons segons l'especificació del disseny de materials.

Per continuar, vegem alguns exemples de com implementar aquests components a la vostra aplicació angular.

Navegació

En primer lloc, parlaré dels components de Navegació.

• Barra d'eines

Heu d'escriure el següent codi al fitxer app.component.html per utilitzar el component Barra d'eines a la vostra aplicació.

 Angular Material Tutorial 

és un contenidor de material angular que s'utilitza per a capçaleres i títols. El color del el contenidor es pot canviar mitjançant el fitxer color propietat.Per defecte, les barres d’eines utilitzen un color de fons neutre basat en el tema actual, és a dir, clar o fosc.Podeu triar tres temes predeterminats que són: 'Primari' , 'Accent' , o 'Advertir' .Per utilitzar aquesta barra d’eines, primer cal importar-la a app.module.ts fitxer de materials angulars mitjançant l'ordre següent:

importa {MatToolbarModule} de '@ angular / material'

Més endavant, també heu d'afegir aquest mòdul al fitxer importacions: [] secció situada al app.module.ts dossier.

importacions: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

Per a Mat-Toolbar, heu d'afegir ' MatToolbarModule '.

Ara, servim el vostre projecte mitjançant l'ordre següent:

de servir -o

Això obrirà el vostre projecte al navegador predeterminat del vostre sistema, tal com es mostra a continuació:

Si voleu canviar el color de la barra d'eines segons la vostra elecció, podeu fer-ho amb l'ajuda del full d'estil CSS. Deixeu-me mostrar-vos un exemple.

En primer lloc, cal esborrar color propietat de contenidor i, a continuació, escriviu el següent CSS codi al fitxer app.component.css dossier.

barra d'eines mat {background-color: / * color-de-la-tria * / color: / * text-color * /}

Ara, serveix el teu projecte per veure el resultat.

• Menú

A continuació, parlaré del component del menú. Heu d’escriure el següent codi al vostre app.component.html dossier.

 Angular Material Tutorial Configuració del menú Ajuda

Afegim un estil a la Menú botó. Heu d’escriure el següent codi al vostre app.component.css dossier.

.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}

class = 'espai' s'utilitza per afegir espaiats entre 'Nom de la barra d'eines' i 'Opció de menú'.

Per si no esteu familiaritzat amb el full d’estils CSS, podeu consultar el nostre bloc a per aprofundir.

Igual que la barra Google, a utilitzar i contenidors, heu de seguir el mateix procediment que l’anterior per importar MatMenuModule i MatButtonModule des de angular material i afegiu-los importacions: [] secció situada a app.module.ts dossier.

Publiqueu el vostre projecte ara per mostrar la sortida.

Controls de formulari

Ara, parlaré dels components a Control de formularis.

• Camp del formulari

Com el seu nom indica, Form-Field s’utilitza per a les entrades donades per l’usuari. S’utilitza més habitualment per al registre d’un usuari, en una aplicació o en un lloc web.

Heu d'escriure el següent codi al fitxer app.component.html per utilitzar el component Form-Field a la vostra aplicació.

 
Controls de formulari
Nom

Com és habitual, cal importar MatFormFieldModule i MatInputModule i afegiu-los importacions: [] secció situada al app.module.ts dossier. El codi anterior s'utilitza generalment per introduir noms com 'Nom', 'Cognom', etc. Fins i tot podeu utilitzar Validadors i fer que un camp sigui obligatori. Per exemple, podeu utilitzar-lo per al camp Correu electrònic. Podeu amagar o mostrar el text de les contrasenyes. Com a referència, consulteu el codi següent:

Introduïu el vostre correu electrònic {{getErrorMessage ()}} Introduïu la vostra contrasenya {{hide? 'visible_off': 'visibilitat'}}

En el vostre app.component.css , heu d’afegir el codi següent:

.example-container {padding-left: 50px}

Ara, a la vostra app.component.ts fitxer, cal importar-lo FormControl i Validadors des de @ angular / formes directori.

importa {FormControl, Validators} de '@ angular / forms'

Fins i tot cal afegir el text per mostrar un error a la classe següent.

classe d'exportació AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Heu d'introduir un valor': this.email.hasError ('correu electrònic')? 'No és un correu electrònic vàlid': ''} hide = true}

Referint-vos al procediment anterior, heu d’escriure el següent codi al vostre app.module.ts per importar els mòduls necessaris.

importa {FormsModule, ReactiveFormsModule} de '@ angular / forms' importa {MatIconModule} de '@ angular / material'

Més endavant, cal afegir aquests mòduls a importacions: [] secció.

• Botó d'opció

Els botons de ràdio s’utilitzen generalment per triar una opció entre les diferents opcions. Podeu consultar el codi següent com a referència.

Per a app.component.html dossier,

 
Gènere
Mascle femella

Per a app.component.css dossier,

botó de ràdio mat {Padding-left: 50px}

Ara cal importar MatRadioModule i afegiu-lo a importacions: [] secció situada al app.module.ts dossier.

Més endavant, haureu de publicar el vostre projecte per mostrar la sortida.

Seguint endavant, parlaré sobre Angular Material CDK.

CDK de material angular

CDK, també conegut com Kit de desenvolupament de components , és una biblioteca de comportaments predefinits a Material angular, que és un conjunt d’eines que implementen en comú patrons d’interacció i funcions de l’aplicació . No té cap estil específic per al disseny de materials. Vegem un exemple de CDK.

• Camp de text

El component Camp de text proporciona utilitats per treballar amb camps d’entrada de text. Podeu utilitzar components CDK al camp de text per canviar la mida de les entrades. Vegem un exemple de com implementar-lo.

Per a app.component.html dossier,

 
CDK de material angular
Mida del tipus de lletra 10px 12px 14px 16px 18px 20px Àrea de text de mida automàtica

Per al app.component.ts fitxer, primer heu d’importar els components necessaris.

importa {CdkTextareaAutosize} des de '@ angular / cdk / text-field' importa {NgZone, ViewChild} des de '@ angular / core' import {take} des de 'rxjs / operators'

Ara heu d’escriure el següent codi dins de la classe.

programa per invertir un número a Java

classe d'exportació AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

A continuació, cal importar MatSelectModule i afegiu-lo a importacions: [] secció situada al app.module.ts dossier.

Finalment, haureu de publicar el vostre projecte per mostrar la sortida.

Aquesta no és la conclusió i hi ha diversos components més en els materials angulars. Podeu fer-hi referència des de pàgina web oficial de material angular.

Amb això, voldria acabar el meu bloc. Espero que tingueu clar els fonaments del material angular.Si teniu cap dubte o consulta sobre aquest article, no dubteu a publicar-los a la secció de comentaris següent.

Si voleu aprendre tot el que acabeu d'aprendre d'aquest bloc, i més informació angular , i orientar la seva carrera cap a un desenvolupador angular competent, a continuació, consideri inscriure's al nostre ' .

Tens alguna pregunta? Si us plau, mencioneu-lo a la secció de comentaris d’aquest bloc “Material angular” i us respondrem el més aviat possible.