Kas yra kampinė medžiaga ir kaip ją įgyvendinti?

UI / UX komponentai kampu, yra žinomi kaip Kampinės medžiagos. Jiepadėti atlikti „Angular Applications“ efektyviai . Tačiau, jei dar nežinote apie juos, pateikiame straipsnį, kuris padės išsamiai išmokti kampines medžiagas. Be to, to gauti išsamių žinių apie kampinį, apsvarstykite galimybę įstoti į ' iš Edurekos.

Šiame straipsnyje nagrinėsiu šias temas:

• Kampinių medžiagų įvadas
• Kampinės medžiagos montavimas
• Kampinės medžiagos komponentai
  • Navigacija
    1. Įrankių juosta
    2. Meniu
  • Formos valdikliai
    1. Formos laukas
    2. Radijo mygtukas
• Kampinė medžiaga CDK
  • Teksto laukas

Kampinių medžiagų įvadas

Medžiagos buvo pristatyti kaip dizaino kalba, kurią „Google“ sukūrė 2014 m. Medžiagų dizainas yra įrankis„front-end“ karkasams, o tai jums padeda vaizdinis , judesio ir sąveika dizainas. Tai taip pat padeda jums pritaikyti įvairius įrenginius ir skirtingus ekrano dydžius. Pirma, jis buvo pažymėtas „AngularJS“, kad šios programos taptų dar geresnės patrauklus ir atlikti greičiau . Tada „Google“ visiškai perrašė kodą nuo nulio ir pašalino JS, t.y. , ir pavadino 2016 m. rugsėjo mėn. Vėliau „Google“ pažymėjo „Material Design“ kaip „Angular“, kuris naudoja , ir pavadino jį kampinėmis medžiagomis.

Kampinės medžiagos arba „User-Interface“ (UI) komponentai padeda kurti jūsų programą struktūrizuotas būdas. Jie pritraukia vartotojus ir tai daro lengviau prieinama elementai ar komponentai, esantys jūsų programoje. Jie taip pat padeda kurti jūsų programas patraukliai ir unikaliai stilius ir formos . Šie komponentai padeda tobulinti jūsų programą nuoseklus , greitai , universalus ir net dizainas reaguojantis svetaines.

Kampinės medžiagos montavimas

Dabar pradėkime nuo greito pamokymo, kaip įdiegti kampines medžiagas. Pirmiausia įsitikinkite, kad jūsų sistemoje įdiegta „Angular“. Jei nesate susipažinę su „Angular“, žiūrėkite nuorodą . Viską sukūrę, galite pridėti kampines medžiagas prie savo projekto naudodami šią komandą:

pridėti @ kampinis / medžiaga

Pirma, jis paprašys pasirinkti iš anksto sukurtą temos pavadinimą arba pasirinktinę temą.

Turite pasirinkti iš anksto sukurtą temą „Indigo / Pink“, kuri yra numatytoji tema jūsų programai stilizuoti. Taip pat galite pasirinkti temą „Pasirinktinis“, kad galėtumėte tinkinti temos failus, kuriuose yra visi įprasti stiliai.

Tada jis paprašys jus nustatyti PlaktukasJS . „HammerJS“ yra populiari biblioteka, daugiausia naudojama „Angular“ programoje. Tai papildo prisilietimo gestų, tokių kaip „Swipe“, „Pan“, „Pinch“, „Rotate“ ir daugelio kitų, palaikymą, ypač mobiliųjų programų.

Galite pasirinkti „Taip“ arba „Ne“. „HammerJS“ gali būti naudingas, kai naudojate savo programą mobiliuosiuose telefonuose. Kadangi mobilieji telefonai siūlo lietimui jautrius ekranus, šie gestai yra naudingesni ir gali atrodyti madingi jūsų mobiliojoje programoje.

Kai pasirinksite pasirinkimą, jis paprašys jūsų nustatyti Naršyklės animacijos kampinei medžiagai.

Turite pasirinkti „Taip“, kad galėtumėte naudoti animacijas savo programoje. Kampinės animacijos daro jūsų programą įdomesnę ir patogesnę naudoti. Tai gali pagerinti jūsų programą ir vartotojo patirtį, kuri pritraukia vartotojų dėmesį.

Vėliau tai įdiegs „Angular Materials“ jūsų programoje.

Kampinės medžiagos komponentai

Kaip minėta anksčiau, kampinės medžiagos komponentai yra ne kas kita UI / UX Dizaino komponentai. Juose yra įvairių komponentų, tokių kaip formos valdikliai, navigacija, mygtukai ir indikatoriai, iššokantys langai ir daug daugiau. Šie komponentai padeda jums įgyvendinti modelius pagal medžiagos dizaino specifikaciją.

Pažvelkime į priekį, pažiūrėkime keletą pavyzdžių, kaip šiuos komponentus įdiegti savo kampinėje programoje.

Navigacija

Pirmiausia aptarsiu navigacijos komponentus.

• Įrankių juosta

Turite įvesti šį kodą į app.component.html failą, jei norite naudoti įrankių juostos komponentą savo programoje.

 Kampinės medžiagos pamoka 

yra konteineris iš kampinės medžiagos, naudojamas antraštėms ir pavadinimams. Spalvos spalva konteinerį galima pakeisti naudojant spalva nuosavybė.Pagal numatytuosius nustatymus įrankių juostose naudojama neutrali fono spalva pagal dabartinę temą, t. Y. Šviesi arba tamsi.Galite pasirinkti tris numatytąsias temas: „Pirminis“ , „Akcentas“ arba „Perspėti“ .Norėdami naudoti šią įrankių juostą, pirmiausia turite ją importuoti į app.module.ts failas iš kampinių medžiagų naudojant šią komandą:

importuoti „MatToolbarModule}“ iš „@ angular / material“

Vėliau taip pat turite pridėti šį modulį į importas: [] skyriuje, esančiame app.module.ts failą.

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

„Mat-Toolbar“ turite pridėti „ „MatToolbarModule“ “.

Tarnaukime jūsų projektui naudodami šią komandą:

patiekimo -o

Tai atvers jūsų projektą numatytojoje sistemos naršyklėje, kaip parodyta žemiau:

Jei norite pakeisti įrankių juostos spalvą pagal savo pasirinkimą, galite tai padaryti naudodami CSS stilių. Leiskite parodyti jums pavyzdį.

Pirma, jūs turite ištrinti spalva turtas nuo konteinerį, tada įveskite šiuos duomenis CSS kodą app.component.css failą.

kilimėlių įrankių juosta {background-color: / * jūsų pasirinkta spalva * / color: / * text-color * /}

Tarnaukite savo projektui, kad pamatytumėte rezultatą.

• Meniu

Toliau aptarsiu meniu komponentą. Turite įvesti šį kodą į savo kodą app.component.html failą.

 Kampinės medžiagos pamoka Meniu Nustatymai Pagalba

Pridėkime šiek tiek stiliaus Meniu mygtuką. Turite įvesti šį kodą į savo kodą app.component.css failą.

.space {flex: 1 1 auto} .btns {plotis: 100 taškų aukštis: 40 taškų šrifto dydis: didelis kraštinės spindulys: 10 taškų kraštinė: 3 taškų vientisas # 113c89 fono spalva: „lightcoral“}

class = ”tarpas” naudojamas tarpams tarp „Įrankių juostos pavadinimo“ ir „Meniu parinkčių“ pridėti.

Jei nesate susipažinę su CSS stilių lentele, galite kreiptis į mūsų tinklaraštį kad įsigilintų.

Kaip naudoti įrankių juostą ir konteinerių, importuodami turite atlikti tą pačią procedūrą kaip pirmiau MatMenuModule ir „MatButtonModule“ nuo kampinė medžiaga ir pridėkite juos importas: [] skyriuje, esančiame app.module.ts failą.

Pateikite savo projektą dabar, kad būtų rodoma išvestis.

Formos valdikliai

Dabar aptarsiu formos valdymo komponentus.

• Formos laukas

Kaip rodo pavadinimas, „Form-Field“ naudojama vartotojo pateiktoms įvestims. Jis dažniausiai naudojamas registruojant vartotoją programoje ar svetainėje.

Turite įvesti šį kodą į app.component.html failą, kad jūsų programoje būtų naudojamas komponentas formos laukas.

 
Formos valdikliai
vardas

Kaip įprasta, turite importuoti „MatFormFieldModule“ ir „MatInputModule“ ir pridėkite juos importas: [] skyriuje, esančiame app.module.ts failą. Pirmiau nurodytas kodas paprastai naudojamas įvesti tokius vardus kaip „Vardas“, „Pavardė“ ir kt. Jūs netgi galite naudoti „Validators“ ir padaryti lauką privalomą. Pavyzdžiui, galite jį naudoti laukui El. Paštas. Galite slėpti arba slėpti slaptažodžių tekstą. Norėdami sužinoti, patikrinkite žemiau esantį kodą:

Įveskite savo el. Pašto adresą {{getErrorMessage ()}} Įveskite slaptažodį {{paslėpti? 'visibility_off': 'matomumas'}}

Jūsų app.component.css failą, turite pridėti šį kodą:

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

Dabar jūsų app.component.ts failą, turite importuoti „FormControl“ ir Patvirtintojai nuo @ kampinis / formos kataloge.

importuoti {FormControl, Validators} iš „@ angular / forms“

Turite net pridėti tekstą, kad šioje klasėje būtų rodoma klaida.

eksportuoti „AppComponent“ klasę {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? „Turite įvesti vertę“: this.email.hasError ('email')? „Netinkamas el. Paštas“: ''} hide = true}

Atsižvelgdami į pirmiau nurodytą procedūrą, turite įvesti šį kodą į savo kodą app.module.ts failą reikalingiems moduliams importuoti.

importuoti {FormsModule, ReactiveFormsModule} iš „@ angular / forms“ importuoti {MatIconModule} iš „@ angular / material“

Vėliau turite pridėti šiuos modulius į importas: [] skyrius.

• Radijo mygtukas

Radijo mygtukai paprastai naudojami norint pasirinkti pasirinkimą tarp skirtingų variantų. Norėdami sužinoti, galite patikrinti šį kodą.

Dėl app.component.html failas,

 
Lytis
Vyras Moteris

Dėl app.component.css failas,

kilimėlis-radijo mygtukas {Padding-left: 50px}

Dabar turite importuoti „MatRadioModule“ ir pridėkite jį importas: [] skyriuje, esančiame app.module.ts failą.

Vėliau, norėdami parodyti išvestį, turite aptarnauti savo projektą.

Eidamas į priekį aptarsiu „Angular Material CDK“.

Kampinė medžiaga CDK

CDK, taip pat žinomas kaip „Component Dev Kit“ yra biblioteka iš anksto apibrėžtas elgesys kampinėje medžiagoje, kuri yra įrankių rinkinys, įgyvendinantis bendrą sąveikos modeliai ir programos ypatybes . Jis neturi jokio stiliaus, būdingo „Material Design“. Pažiūrėkime CDK pavyzdį.

• Teksto laukas

Teksto lauko komponentas suteikia įrankius darbui su teksto įvesties laukais. Norėdami pakeisti įvesties dydį, teksto lauke galite naudoti CDK komponentus. Pažiūrėkime, kaip tai įgyvendinti.

Dėl app.component.html failas,

 
Kampinė medžiaga CDK
Šrifto dydis 10 taškų 12 taškų 14 taškų 16 taškų 18 taškų 20 taškų automatinio teksto srities pakeitimų

Už app.component.ts failą, pirmiausia turite importuoti būtinus komponentus.

importuoti {CdkTextareaAutosize} iš „@ angular / cdk / text-field“ importuoti {NgZone, ViewChild} iš „@ angular / core“ importuoti {take} iš „rxjs / operators“

Dabar klasėje turite įvesti šį kodą.

maksimalus kaupo diegimas java

eksportuoti klasės „AppComponent“ {konstruktorius (privatus _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}

Tada turite importuoti „MatSelectModule“ ir pridėkite jį importas: [] skyriuje, esančiame app.module.ts failą.

Galiausiai, jums reikia aptarnauti savo projektą, kad būtų rodoma išvestis.

Tai nėra išvada ir yra keletas kitų kampinių medžiagų komponentų. Galite kreiptis į juos iš Oficiali svetainė kampinės medžiagos.

Tuo norėčiau užbaigti savo tinklaraštį. Tikiuosi, kad jums yra aiškūs kampinės medžiagos pagrindai.Jei turite kokių nors abejonių ar klausimų dėl šio straipsnio, nedvejodami paskelbkite juos toliau pateiktame komentarų skyriuje.

Jei norėtumėte sužinoti visa tai, ką ką tik sužinojote iš šio tinklaraščio, ir daugiau Kampinis ir nukreipkite savo karjerą į įgudusį kampinį kūrėją, tada apsvarstykite galimybę dalyvauti mūsų ' .

Turite mums klausimą? Prašau tai paminėti šio „Angular Material“ tinklaraščio komentarų skyriuje ir mes kuo greičiau susisieksime su jumis.