Kuidas luua reageerimisriba reageerimise abil

See õpetus on mõeldud kõigile, keda huvitab, kuidas nad Reaktisse lihtsa edenemisriba üles ehitaksid. Et see oleks kõigile kena ja hõlbus, teen õppejõu kaudu edasi meie näite Codepenis. Lõpuks lisatakse link valmis versioonile.

Vaadake minu teisi artikleid

Pärast praeguse artikli lugemist kontrollige neid huvi korral!

Komponendi kavandamine

Enne kui hakkame koodi kirjutama, saame kiiresti arhitektuurida, milline peaks välja nägema meie React edenemisriba. Mulle tundub, nagu vajaksime oma edenemisriba moodustamiseks ainult kahte elementi. Need elemendid on:

  • Vanema div, mis hoiab selles teist div. Nimetage see üks ProgressBar.
  • Div, mis täidab vanemdivisjoni täiteainena. See div on kujundatud värviga ja täidab horisontaalselt ja vertikaalselt konteineri x protsenti. Nimetame selle täiteaineks.

Tellingud ProgressBar

Olgu, lähme kodeerimise juurde. Alustuseks tuleb ehitada edenemisriba tellingud. Selles õpetuses kasutan funktsioonina React Component ProgressBari. Selle saavutamiseks on palju muid võimalusi, kuid laseme sellel lähenemisel lihtsalt minna.

See on vanema div, millest ma rääkisin planeerimise osas. Selle sisse peame lihtsalt lisama komponendi Filler. Seda pole meil veel välja ehitatud, nii et laseme seda ehitada!

Suurepärane. Meil on kaks komponenti. Võimaldame need kõik kokku panna, lisades ProgressBari täiteaine.

Vau, see on uskumatu. Välja arvatud see, et kumbagi komponenti pole absoluutselt kujundatud. Võimaldab need kiiresti üles stiili panna!

Edenemisriba klassi stiilid on üsna sirged. Ainus, mida ma teen, on algse kõrguse ja laiuse, äärise ja ümarate servade andmine piiriraadiuse abil. Oluline on märkida minu positsiooni kasutamist: edenemisriba klassis on seda vaja, kuna ma annan täiteklassile kõrguse 100%.

Täitestiilide puhul on neid ka lihtne mõista. Seadsin täiteaine taustaks türkiissinise sinise värvi (# 1DA598) ja veendudes, et selle täiteaine kõrgus ühtib selle algtasemega, andes sellele 100% kõrguse. Samuti soovin, et ääreraadius vastaks vanemale, nii et seadsin selle oma vanemalt pärima.

Võib-olla olete uudishimulik ülemineku kohta, mille lisasin täiteainele. See muudab täiteaine ülemineku lihtsalt loomulikumaks, kui selle suurus suureneb / väheneb. Saame vaadata, mis meil praegu edenemisriba jaoks on:

Igav, tühi edenemisriba = (

Selle igava edenemisriba saame parandada, lisades mõned rekvisiidid. Teeme seda!

Vajalike rekvisiitide lisamine komponendile

Peame välja töötama teatud tüüpi süsteemi, mis võimaldab meie edenemisriba täitekomponendil dünaamiliselt muutuda. See on koht, kus peame alustama Reacti oleku ja rekvisiitide funktsioonide integreerimist. Selle jaoks võimaldab ehitada veel ühe komponendi, mis võimaldab meil neid funktsioone testida ja rakendada.

Nagu näete, initsialiseerin atribuudi olekus, mida nimetatakse protsendiks, ja omistan sellele algväärtuse 0. See on olekumuutuja, mida hakkame kasutama meie täiteaine laiuse kontrollimiseks. Et ProgressBar seda väärtust teadvustada, annan selle komponendile kinnitatud tugipositsioonina.

Siiski on probleem. On suurepärane, et me anname väärtuse rekvisiitidena alla, kuid ProgressBari komponendil pole endiselt aimugi, kuidas selle rekvisiidiga hakkama saada. Selle parandamiseks saame teha lihtsalt järgmist:

Luues täiteaine külge kinnitatud tugiposti, saame väärtuse täitematerjaliks veelgi allapoole anda. Kõik, mida peame nüüd tegema, on teha midagi väärtusega, mille saame Filleri sees, ja see peakski olema meie tehtud.

Täitelaiuse seadistamine

Viimane asi, mida peame tegema, on võtta väärtus, mille saame täiteainena rekvisiidina, ja seada see väärtus täiteaine laiuseks. Seda saab hõlpsalt rakendada tekstisisestuse kaudu. Vaatame, kuidas see tehtud on.

Täiteaine laiuse dünaamiline seadmine selle tugiväärtuse põhjal

See on see! Võimaldab muuta ainult ProgressBarExample'i algse oleku atribuudiks 60:

Vaadake nüüd meie ilusat edenemisriba!

Asjade kokku pakkimine

Nüüd ma tean, et see oli lihtsalt väga lihtne näide, kuid ma lisasin teile põhjalikuma versiooni, et saaksite Codepenis segadusse ajada. See on täielikult interaktiivne ja loodetavasti õpetab see teile midagi uut. Kui teile see õpetus meeldis, tahaksin teile südamest, et annaksite mulle GitHubis järgimist!

https://github.com/dzuz14

Lingid

Õppige YouTube'is tasuta reageerima

Kui olete selle artikli läbi lugenud, tahaksin teile vaadata oma tasuta YouTube'i õpetust Reacti kohta, kus näitan teile, kuidas pisipiltide galeriid nullist üles ehitada. Andke julgelt enne lugema hakkamist järjehoidja! =)

Codepeni täielik edenemisriba näide

DanZuzevich.com