Wat is hoekig materiaal en hoe moet het worden geïmplementeerd?

UI / UX-componenten in Angular staan ​​bekend als Hoekige materialen. Zehelpen Angular Applications presteren efficiënt . Als u zich er echter nog niet van bewust bent, is hier een artikel om u te helpen Angular Materials in detail te leren. Ook to diepgaande kennis van Angular opdoen, overweeg om u in te schrijven ' van Edureka.

In dit artikel ga ik in op de volgende onderwerpen:

• Inleiding tot hoekige materialen
• Hoekige materiaalinstallatie
• Hoekige materiaalcomponenten
  • Navigatie
    1. Werkbalk
    2. Menu
  • Formulierbesturingselementen
    1. Formulierveld
    2. Radio knop
• Hoekig materiaal CDK
  • Tekstveld

Inleiding tot hoekige materialen

Materialen werden geïntroduceerd als een ontwerptaal die in 2014 door Google is ontwikkeld. Materiaal ontwerp is een hulpmiddelvoor front-end frameworks, die u helpen bij visueel , beweging , en interactie ontwerp. Het helpt je ook om je aan te passen op verschillende apparaten en verschillende schermformaten. Ten eerste werd het getagd naar AngularJS om deze apps meer te maken aantrekkelijk en presteren sneller . Vervolgens heeft Google de code helemaal opnieuw geschreven en JS verwijderd, d.w.z. , en noemde het in september 2016. Later tagde Google het Material Design in Angular, dat gebruikt , en noemde het Angular Materials.

Hoekige materialen of User-Interface (UI) componenten helpen u bij het ontwerpen van uw applicatie in een gestructureerd manier. Ze trekken gebruikers aan en maken het gemakkelijker toegankelijk de elementen of componenten die aanwezig zijn in uw aanvraag. Ze helpen ook bij het ontwerpen van uw applicaties op een aantrekkelijke manier, met uniek stijlen en vormen . Deze componenten helpen bij het maken van uw aanvraag meer consequent , snel , veelzijdig en zelfs ontwerp snel reagerend websites.

Hoekige materiaalinstallatie

Laten we nu beginnen met een korte handleiding over het installeren van Angular Materials. Zorg er allereerst voor dat Angular op uw systeem is geïnstalleerd. Als u Angular niet kent, raadpleegt u de link op . Zodra u alles heeft ingesteld, kunt u Angular Materials aan uw project toevoegen met behulp van de volgende opdracht:

van add @ angular / material

Ten eerste wordt u gevraagd om een ​​vooraf gebouwde themanaam of een aangepast thema te kiezen.

U moet het vooraf gebouwde thema 'Indigo / Pink' kiezen, het standaardthema om uw toepassing vorm te geven. U kunt ook het thema 'Aangepast' kiezen, zodat u uw themabestanden kunt aanpassen die alle gangbare stijlen bevatten.

Vervolgens wordt u gevraagd om in te stellen HammerJS . HammerJS is een populaire bibliotheek die voornamelijk wordt gebruikt in Angular-toepassingen. Het voegt ondersteuning toe voor aanraakbewegingen zoals Swipe, Pan, Pinch, Rotate en nog veel meer, vooral in mobiele applicaties.

U kunt kiezen tussen 'Ja' of 'Nee'. HammerJS kan handig zijn wanneer u uw applicatie op mobiele telefoons gebruikt. Aangezien mobiele telefoons aanraakschermen bieden, zijn deze gebaren nuttiger en kunnen ze er trendy uitzien in uw mobiele applicatie.

Nadat u uw keuze heeft gemaakt, wordt u vervolgens gevraagd om in te stellen Browser-animaties voor hoekig materiaal.

U moet 'Ja' kiezen, zodat u animaties in uw toepassing kunt gebruiken. Hoekige animaties maken uw toepassing leuker en gebruiksvriendelijker. Dit kan uw app en gebruikerservaring verbeteren, wat de aandacht van gebruikers trekt.

Dit installeert vervolgens Angular Materials in uw applicatie.

Hoekige materiaalcomponenten

Zoals eerder vermeld, zijn hoekige materiaalcomponenten niets anders dan UI / UX Ontwerpcomponenten. Ze bevatten verschillende componenten, zoals formulierbesturing, navigatie, knoppen en indicatoren, pop-ups en nog veel meer. Deze componenten helpen u patronen te implementeren volgens de Material Design-specificatie.

Laten we verder gaan en enkele voorbeelden bekijken van hoe u deze componenten in uw Angular-applicatie kunt implementeren.

Navigatie

Eerst zal ik de componenten in Navigatie bespreken.

• Werkbalk

U moet de volgende code typen in het app.component.html bestand om de Toolbar-component in uw toepassing te gebruiken.

 Zelfstudie voor hoekig materiaal 

is een container van Angular materiaal die wordt gebruikt voor headers en titels. De kleur van de container kan worden gewijzigd met de kleur eigendom.Standaard gebruiken werkbalken een neutrale achtergrondkleur op basis van het huidige thema, d.w.z. licht of donker.U kunt drie standaardthema's kiezen, namelijk: ‘Primair’ , 'accent' , of 'waarschuwen' .Om deze werkbalk te gebruiken, moet u deze eerst importeren in app.module.ts bestand uit Angular-materialen met behulp van de volgende opdracht:

importeer {MatToolbarModule} uit '@ angular / material'

Later moet u deze module ook toevoegen aan het invoer: [] sectie in de app.module.ts het dossier.

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

Voor Mat-Toolbar moet u ' MatToolbarModule ”.

Laten we nu uw project van dienst zijn met de volgende opdracht:

van serveren -o

Hierdoor wordt uw project geopend in de standaardbrowser van uw systeem, zoals hieronder weergegeven:

Als u de kleur van de werkbalk naar uw keuze wilt wijzigen, kunt u dit doen met behulp van CSS-stylesheet. Ik zal je een voorbeeld geven.

Eerst moet u wissen kleur eigendom van container en typ vervolgens het volgende CSS code in de app.component.css het dossier.

mat-werkbalk {background-color: / * color-of-your-choice * / color: / * text-color * /}

Dien nu uw project om het resultaat te zien.

• Menu

Vervolgens zal ik de menucomponent bespreken. U moet de volgende code in uw app.component.html het dossier.

 Zelfstudie voor hoekig materiaal Menu Instellingen Help

Laten we wat styling toevoegen aan de Menu knop. U moet de volgende code in uw app.component.css het dossier.

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

class = 'spatie' wordt gebruikt om afstand toe te voegen tussen 'Werkbalknaam' en 'Menuoptie'.

Als u niet bekend bent met CSS-stylesheet, kunt u onze blog raadplegen op om de diepte in te gaan.

Net als Toolbar, te gebruiken en containers, moet u dezelfde procedure volgen als hierboven om te importeren MatMenuModule en MatButtonModule van hoekig materiaal en voeg ze toe invoer: [] sectie gelegen in app.module.ts het dossier.

Serveer uw project nu om de output weer te geven.

Formulierbesturingselementen

Nu zal ik de componenten in Form Control bespreken.

• Formulierveld

Zoals de naam doet vermoeden, wordt Form-Field gebruikt voor invoer door de gebruiker. Het wordt meestal gebruikt voor registratie van een gebruiker, in een applicatie of een website.

U moet de volgende code typen in het app.component.html bestand om de Form-Field-component in uw applicatie te gebruiken.

 
Formulierbesturingselementen
Naam

Zoals gewoonlijk moet u MatFormFieldModule en MatInputModule en voeg ze toe invoer: [] sectie in de app.module.ts het dossier. De bovenstaande code wordt over het algemeen gebruikt om namen in te voeren zoals 'Voornaam', 'Achternaam', enz. U kunt zelfs Validators gebruiken en een veld verplicht maken. U kunt het bijvoorbeeld gebruiken voor het veld E-mail. U kunt de tekst voor wachtwoorden verbergen of zichtbaar maken. Bekijk de onderstaande code voor uw referentie:

Voer uw e-mailadres in {{getErrorMessage ()}} Voer uw wachtwoord in {{verbergen? 'zichtbaarheid_off': 'zichtbaarheid'}}

In uw app.component.css bestand, moet u de volgende code toevoegen:

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

Nu, in uw app.component.ts bestand, moet u importeren FormControl en Validators van @ hoekig / vormen directory.

importeer {FormControl, Validators} vanuit '@ angular / formulieren'

U moet zelfs de tekst toevoegen om een ​​fout in de volgende klasse weer te geven.

export class AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('verplicht')? 'U moet een waarde invoeren': this.email.hasError ('e-mail')? 'Geen geldig e-mailadres': ''} hide = true}

Verwijzend naar de bovenstaande procedure, moet u de volgende code in uw app.module.ts bestand om de benodigde modules te importeren.

importeer {FormsModule, ReactiveFormsModule} vanuit '@ angular / formulieren' importeer {MatIconModule} vanuit '@ angular / material'

Later moet u deze modules toevoegen aan invoer: [] sectie.

• Radio knop

Keuzerondjes worden over het algemeen gebruikt om een ​​keuze te maken uit de verschillende opties. U kunt de volgende code ter referentie bekijken.

Voor app.component.html het dossier,

 
Geslacht
Man vrouw

Voor app.component.css het dossier,

mat-radio-button {Padding-left: 50px}

Nu moet u importeren MatRadioModule en voeg het toe invoer: [] sectie in de app.module.ts het dossier.

Later moet u uw project van dienst zijn om de output weer te geven.

Verderop zal ik Angular Material CDK bespreken.

Hoekig materiaal CDK

CDK, ook wel bekend als Component Dev Kit , is een bibliotheek van voorgedefinieerde gedragingen in Angular Material, een set tools die common interactiepatronen en toepassingsfuncties . Het heeft geen specifieke vormgeving voor materiaalontwerp. Laten we een voorbeeld van CDK bekijken.

• Tekstveld

De component Tekstveld biedt hulpprogramma's voor het werken met tekstinvoervelden. U kunt CDK-componenten op Tekstveld gebruiken om de grootte van de invoer te wijzigen. Laten we eens kijken hoe u dit kunt implementeren.

Voor app.component.html het dossier,

 
Hoekig materiaal CDK
Lettergrootte 10px 12px 14px 16px 18px 20px Autosize tekstgebied

Voor de app.component.ts bestand, moet u eerst de benodigde componenten importeren.

importeer {CdkTextareaAutosize} uit '@ angular / cdk / text-field' importeer {NgZone, ViewChild} uit '@ angular / core' importeer {take} uit 'rxjs / operators'

Nu moet u de volgende code in de klas typen.

is een postdoctorale masteropleiding

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

Vervolgens moet u importeren MatSelectModule en voeg het toe invoer: [] sectie in de app.module.ts het dossier.

Ten slotte moet u uw project dienen om de uitvoer weer te geven.

Dit is niet de conclusie en er zijn verschillende andere componenten in Angular Materials. U kunt ernaar verwijzen vanuit het officiële website van hoekig materiaal.

Hiermee wil ik mijn blog beëindigen. Ik hoop dat je duidelijk bent over de grondbeginselen van Angular Material.Als u twijfels of vragen heeft over dit artikel, aarzel dan niet om deze in de opmerkingen hieronder te plaatsen.

Als je alles wilt weten wat je zojuist van deze blog hebt geleerd, en meer over Hoekig , en richt je carrière op een bekwame Angular Developer, en overweeg dan om je in te schrijven voor onze ' .

Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van deze 'Angular Material' blog en we nemen zo snel mogelijk contact met u op.