Mikä on kulmamateriaali ja miten se toteutetaan?

UI / UX-komponentit kulmassa, tunnetaan nimellä Kulmamateriaalit. Neauttaa kulmasovelluksia suorittamaan tehokkaasti . Jos et kuitenkaan ole vielä tietoinen niistä, tässä on artikkeli, joka auttaa sinua oppimaan kulmamateriaalit yksityiskohtaisesti. Myös to saada syvällistä tietoa kulmasta, harkitse ilmoittautumista ' Edurekalta.

Tässä artikkelissa käsittelen seuraavia aiheita:

• Johdanto kulmamateriaaleihin
• Kulmamateriaalin asennus
• Kulmamateriaalikomponentit
  • Navigointi
    1. Työkalurivi
    2. Valikko
  • Lomakkeen hallinta
    1. Lomakekenttä
    2. Radiopainike
• Kulmamateriaali CDK
  • Tekstikenttä

Johdanto kulmamateriaaleihin

Materiaalit esiteltiin suunnittelukielenä, jonka Google kehitti vuonna 2014. Materiaalisuunnittelu on työkalukäyttöliittymäkehyksiä varten, mikä auttaa sinua visuaalinen , liike ja vuorovaikutus design. Se auttaa myös sopeutumaan eri laitteisiin ja erikokoisiin näyttöihin. Ensinnäkin se merkittiin AngularJS: ään näiden sovellusten lisäämiseksi viehättävä ja esiintyä nopeammin . Sitten Google kirjoitti koodin kokonaan uudelleen tyhjästä ja poisti JS: n. ja antoi sille nimen syyskuussa 2016. Myöhemmin Google merkitsi materiaalisuunnittelun kulmaksi, joka käyttää ja antoi sille nimen Kulmamateriaalit.

Kulmamateriaalit tai käyttöliittymän (UI) komponentit auttavat sinua suunnittelemaan sovelluksesi a jäsennelty tavalla. Ne houkuttelevat käyttäjiä ja tekevät siitä helpompi käyttää sovelluksessa olevat elementit tai komponentit. Ne auttavat myös suunnittelemaan sovelluksesi houkuttelevalla tavalla ainutlaatuisella tavalla tyylejä ja muodot . Nämä komponentit auttavat tekemään sovelluksestasi enemmän johdonmukainen , nopeasti , monipuolinen ja jopa suunnittelu reagoiva verkkosivustoja.

Kulmamateriaalin asennus

Aloitetaan nyt pikaoppaasta kulmamateriaalien asentamisesta. Ensinnäkin, varmista, että järjestelmässäsi on asennettuna Angular. Jos et tunne Angularia, katso linkkiä . Kun kaikki on määritetty, voit lisätä kulmamateriaaleja projektiisi seuraavan komennon avulla:

Lisää @ kulma / materiaali

Ensinnäkin se pyytää sinua valitsemaan valmiiksi teeman nimen tai mukautetun teeman.

Sinun on valittava valmiiksi suunniteltu Indigo / Pink-teema, joka on oletusteema sovelluksesi tyylin luomiseen. Voit myös valita mukautetun teeman, jotta voit mukauttaa teematiedostojasi, jotka sisältävät kaikki yleiset tyylit.

Seuraavaksi se pyytää sinua määrittämään VasaraJS . HammerJS on suosittu kirjasto, jota käytetään pääasiassa kulmasovelluksissa. Se lisää tukea kosketuseleille, kuten pyyhkäisy, panorointi, nipistys, kierto ja monet muut, erityisesti mobiilisovelluksissa.

Voit valita joko “Kyllä” tai “Ei”. HammerJS voi olla hyödyllinen, kun käytät sovellustasi matkapuhelimissa. Koska matkapuhelimet tarjoavat kosketusnäyttöjä, nämä eleet ovat hyödyllisempiä ja saattavat näyttää trendikkäiltä mobiilisovelluksessa.

Kun olet valinnut valintasi, se pyytää sinua seuraavaksi määrittämään Selainanimaatiot kulmamateriaalille.

Sinun on valittava 'Kyllä', jotta voit käyttää animaatioita sovelluksessasi. Kulma-animaatiot tekevät sovelluksestasi hauskempaa ja helpompaa käyttää. Tämä voi parantaa sovellustasi ja käyttökokemustasi, joka herättää käyttäjien huomion.

Myöhemmin tämä asentaa kulmamateriaalit sovellukseesi.

Kulmamateriaalikomponentit

Kuten aiemmin mainittiin, kulmamateriaalikomponentit ovat vain UI / UX Suunnittelun komponentit. Ne sisältävät monenlaisia ​​komponentteja, kuten lomakkeen ohjaimet, navigointi, painikkeet ja osoittimet, ponnahdusikkunat ja paljon muuta. Nämä komponentit auttavat sinua toteuttamaan malleja materiaalisuunnitteluvaatimusten mukaisesti.

Katsotaanpa muutama esimerkki näiden komponenttien toteuttamisesta kulmasovelluksessasi.

Navigointi

Ensinnäkin keskustelen navigoinnin komponenteista.

• Työkalurivi

Sinun on kirjoitettava seuraava koodi app.component.html tiedosto käyttääksesi työkalupalkin komponenttia sovelluksessasi.

 Kulmamateriaalin opetusohjelma 

on kulmamateriaalista valmistettu kontti, jota käytetään otsikoihin ja nimikkeisiin. Väri kontti voidaan vaihtaa käyttämällä väri omaisuus.Työkalurivit käyttävät oletusarvoisesti neutraalia taustaväriä nykyisen teeman mukaan, eli joko vaaleaa tai tummaa.Voit valita kolme oletusteemaa, jotka ovat: 'Ensisijainen' , 'aksentti' tai 'varoittaa' .Jos haluat käyttää tätä työkalupalkkia, sinun on ensin tuotava se sisään app.module.ts tiedosto kulmamateriaaleista seuraavan komennon avulla:

tuo {MatToolbarModule} osoitteesta @ angular / material

Myöhemmin sinun on lisättävä tämä moduuli myös tuonti: [] -osassa, joka sijaitsee app.module.ts tiedosto.

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

Mat-Toolbaria varten sinun on lisättävä MatToolbarModule ”.

Palvellaan nyt projektiasi seuraavalla komennolla:

palvelusta -o

Tämä avaa projektisi järjestelmän oletusselaimessa alla olevan kuvan mukaisesti:

Jos haluat muuttaa työkalurivin väriä valintasi mukaan, voit tehdä sen CSS-tyylitaulukon avulla. Haluan näyttää sinulle esimerkin.

Ensin sinun on poistettava väri omaisuutta ja kirjoita sitten seuraava CSS koodi app.component.css tiedosto.

mat-työkalurivi {background-color: / * valitsemasi väri * / color: / * text-color * /}

Palvele nyt projektiasi nähdäksesi tulos.

• Valikko

Seuraavaksi keskustelen valikkokomponentista. Sinun on kirjoitettava seuraava koodi app.component.html tiedosto.

 Kulmamateriaalin opetusohjelma Valikkoasetusten ohje

Lisätään tyyliä Valikko -painiketta. Sinun on kirjoitettava seuraava koodi app.component.css tiedosto.

.space {flex: 1 1 auto} .btns {leveys: 100px korkeus: 40px kirjasinkoko: iso reunusäde: 10px reunus: 3px kiinteä # 113c89 taustaväri: lightcoral}

class = ”välilyönti” käytetään lisäämään väliä 'Työkalupalkin nimi' ja 'Valikko-vaihtoehto' välillä.

Jos et ole perehtynyt CSS-tyylitaulukkoon, voit viitata blogiimme saada syvällistä.

Aivan kuten Toolbar, käyttää ja säilöihin, sinun on noudatettava samaa menettelyä kuin yllä, tuotaaksesi MatMenuModuuli ja MatPainikeModuuli alkaen kulmamateriaali ja lisää ne sisään tuonti: [] -osio sijaitsee app.module.ts tiedosto.

Tarjoa projektisi nyt tuotoksen näyttämiseksi.

Lomakkeen hallinta

Keskustelen nyt lomakkeenhallinnan komponenteista.

• Lomakekenttä

Kuten nimestä voi päätellä, lomakekenttää käytetään käyttäjän antamiin syötteisiin. Sitä käytetään yleisimmin käyttäjän rekisteröintiin sovelluksessa tai verkkosivustolla.

Sinun on kirjoitettava seuraava koodi app.component.html tiedosto, jolla voit käyttää Form-Field-komponenttia sovelluksessasi.

 
Lomakkeen hallinta
Nimi

Kuten tavallista, sinun on tuotava MatFormFieldModule ja MatInputModule ja lisää ne sisään tuonti: [] -osassa, joka sijaitsee app.module.ts tiedosto. Yllä olevaa koodia käytetään yleensä sellaisten nimien syöttämiseen, kuten 'Etunimi', 'Sukunimi' jne. Voit jopa käyttää Vahvistimia ja tehdä kentästä pakollisen. Voit käyttää sitä esimerkiksi Sähköposti-kentässä. Voit piilottaa tai piilottaa salasanojen tekstin. Katso viitteellesi alla oleva koodi:

Kirjoita sähköpostiosoitteesi {{getErrorMessage ()}} Kirjoita salasanasi {{piilota? 'visibility_off': 'visibility'}}

Sinun app.component.css tiedosto, sinun on lisättävä seuraava koodi:

.esimerkki-kontti {padding-left: 50px}

Nyt sinun app.component.ts tiedosto, sinun on tuotava FormControl ja Vahvistimet alkaen @ kulma / muodot hakemistoon.

tuo {FormControl, Validators} osoitteesta @ angular / forms

Sinun on jopa lisättävä teksti, jotta virhe näkyy seuraavassa luokassa.

viedä luokka AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Sinun on annettava arvo': this.email.hasError ('email')? Ei kelvollinen sähköpostiosoite: ''} hide = true}

Yllä olevaan menettelyyn viitaten sinun on kirjoitettava seuraava koodi app.module.ts tiedosto tarvittavien moduulien tuomiseksi.

tuo {FormsModule, ReactiveFormsModule} tiedostosta @ angular / form

Myöhemmin sinun on lisättävä nämä moduulit sisään tuonti: [] -osiossa.

• Radiopainike

Radiopainikkeita käytetään yleensä valitsemaan valinta eri vaihtoehtojen välillä. Voit tarkistaa seuraavan koodin viitteeksi.

Sillä app.component.html tiedosto,

 
Sukupuoli
Mies Nainen

Sillä app.component.css tiedosto,

mat-radiopainike {Täyte vasen: 50px}

Nyt sinun on tuotava MatRadioModuuli ja lisää se sisään tuonti: [] -osassa, joka sijaitsee app.module.ts tiedosto.

Myöhemmin sinun on palveltava projektiasi tuotoksen näyttämiseksi.

Etenen eteenpäin keskustelemaan Angular Material CDK: sta.

Kulmamateriaali CDK

CDK, joka tunnetaan myös nimellä Component Dev Kit on kirjasto ennalta määritelty käyttäytyminen kulmamateriaalissa, joka on joukko työkaluja, jotka toteuttavat yhteisiä vuorovaikutusmallit ja sovelluksen ominaisuudet . Siinä ei ole mitään erityistä tyyliä materiaalisuunnittelulle. Katsotaanpa esimerkki CDK: sta.

• Tekstikenttä

Tekstikenttä-komponentti tarjoaa apuohjelmia tekstinsyöttökenttien käsittelyyn. Voit käyttää tekstikentän CDK-komponentteja tulojen koon muuttamiseen. Katsotaanpa esimerkki sen toteuttamisesta.

Sillä app.component.html tiedosto,

 
Kulmamateriaali CDK
Kirjasinkoko 10px 12px 14px 16px 18px 20px Tekstin alueen automaattinen muuttaminen

Varten app.component.ts tiedosto, sinun on ensin tuotava tarvittavat komponentit.

tuoda {CdkTextareaAutosize} osoitteesta '@ angular / cdk / text-field' tuonti {NgZone, ViewChild} kohteesta '@ angular / core' tuonti {take} kohteesta 'rxjs / operators'

Nyt sinun on kirjoitettava seuraava koodi luokan sisälle.

Microsoft sql -oppaat aloittelijoille

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

Seuraavaksi sinun on tuotava MatSelectModule ja lisää se sisään tuonti: [] -osassa, joka sijaitsee app.module.ts tiedosto.

Lopuksi sinun on palveltava projektiasi tuotoksen näyttämiseksi.

Tämä ei ole johtopäätös, ja kulmamateriaaleissa on useita muita komponentteja. Voit viitata niihin virallinen nettisivu kulmamateriaalia.

Tällä haluaisin lopettaa blogini. Toivon, että olet selvä kulmamateriaalin perusteista.Jos sinulla on epäilyksiä tai kysymyksiä tästä artikkelista, älä epäröi lähettää ne alla olevaan kommenttiosioon.

Jos haluat oppia kaiken, mitä olet juuri oppinut tältä blogilta, ja lisää Kulmikas ja suuntaa urasi taitavalle kulmakehittäjälle, ja harkitse sitten ilmoittautumista meidän ' .

Onko sinulla kysymys meille? Mainitse se tämän 'Angular Material' -blogin kommenttiosassa ja otamme sinuun yhteyttä mahdollisimman pian.