Kuinka rakentaa etenemispalkki reagoimalla

Tämä opetusohjelma on tarkoitettu kaikille, jotka ovat kiinnostuneita siitä, miten he rakentaisivat yksinkertaisen etenemispalkin Reakttiin. Jotta tästä olisi mukavaa ja helppoa kaikille, aion rakentaa esimerkkiämme Codepenissa edetessämme oppaan läpi. Linkki valmiiseen versioon sisällytetään lopussa.

Tutustu muihin artikkeleihini

Ole hyvä ja tarkista nämä, jos olet kiinnostunut lukeessasi nykyisen artikkelin!

Komponentin suunnittelu

Ennen kuin aloitamme koodin kirjoittamisen, arkkitehtiimme nopeasti, millainen React-etenemispalkki näyttää. Minusta vaikuttaa siltä, ​​että tarvitsemme todella vain kahta elementtiä edistymispalkin muodostamiseksi. Nämä elementit ovat:

  • Vanhempi div, joka pitää sisällään toisen div: n. Annetaan nimetä tämä ProgressBar.
  • Div, joka toimii täyteaineena vanhemman div: n sisällä. Tämä jako on muotoiltu värillä ja se täyttää x-prosenttisen määrän säiliöstä vaaka- ja pystysuunnassa. Annetaan nimetä tämä täyteaine.

Rakennustelineet ProgressBar

Hyvä on, siirrytään koodaukseen. Aloitetaan rakentamalla etenemispalkin telineet. Käytän tässä opetusohjelmassa ProgressBaria funktionaalisena reagointikomponenttina. Tähän on paljon muita tapoja, mutta mennään vain tähän lähestymistapaan.

Tästä vanhemmasta div-osiosta puhuin suunnitteluosassa. Sen sisälle meidän on vain lisättävä Filler-komponentti. Meitä ei vielä ole rakennettu, joten rakennetaan se!

Loistava. Meillä on kaksi komponenttia. Annetaan koota ne kaikki lisäämällä täyteainetta ProgressBariin.

Vau, tämä on uskomatonta. Lukuun ottamatta mitään näistä komponenteista ei ole mitään muotoilua. Antaa näiden tyyliä nopeasti!

Edistymispalkkiluokan tyylit ovat melko suoraviivaisia. Ainoa, mitä teen, antaa sille alkuperäisen korkeuden ja leveyden, reunan ja eräät pyöristetyt reunat käyttämällä rajasädettä. On tärkeää huomata, että käytän asemaa: suhteessa edistymispalkkiluokkaan, tätä tarvitaan, koska annan täyttöluokalle 100% korkeuden.

Täytetyyleille nämä ovat myös helppo ymmärtää. Asetin täyteaineen taustan turkoosi siniseksi-väriseksi (# 1DA598) ja varmista, että täyteaineeni korkeus vastaa sen vanhempaa antamalla sen korkeudeksi 100%. Haluan myös, että rajasäde vastaa vanhempaa, joten asetin sen perimään vanhemmaltaan.

Saatat olla kiinnostunut siirtymästä, jonka lisäin täyteaineeseen. Tämä yksinkertaisesti tekee täyteaineen siirtymästä luonnollisempaa, kun sen koko kasvaa / pienenee. Tarkastellaan mitä meillä on tällä hetkellä edistymispalkissa:

Tylsä, tyhjä etenemispalkki = (

Voimme korjata tämän tylsän edistymispalkin lisäämällä joitain rekvisiitta. Tehdään se!

Tarvittavien rekvisiittien lisääminen komponenttiin

Meidän on keksittävä jonkin tyyppinen järjestelmä, jonka avulla edistymispalkin täyteainekomponentti voi dynaamisesti muuttua. Tässä meidän on aloitettava Reactin tilan ja rekvisiittiominaisuuksien integrointi. Voit tehdä niin, rakentamalla toisen komponentin, jonka avulla voimme testata ja toteuttaa nämä ominaisuudet.

Kuten näette, alustan ominaisuuden tilassa, jota kutsutaan prosenttiosuudeksi, ja annan sille alkuperäisen arvon 0. Tätä tilamuuttujaa käytämme täyteaineemme leveyden hallintaan. Jotta ProgressBar tiedostaa tämän arvon, välitän sen komponentiksi kiinnitetyn potkurina.

On kuitenkin ongelma. On hienoa, että siirrämme arvoa potkurina, mutta ProgressBar-komponentilla ei ole vielä aavistustakaan, miten käsitellä tätä potkuria. Tämän korjaamiseksi voimme yksinkertaisesti tehdä seuraavan:

Luomalla täyteaineeseen kiinnitetyn potkurin, voimme siirtää arvon edelleen edelleen Filleriin. Ainoa mitä meidän on nyt tehtävä, on tehdä jotain sillä arvolla, jonka saamme Fillerin sisällä, ja meidän pitäisi tehdä.

Täyteaineen leveyden asettaminen

Viimeinen asia, joka meidän on tehtävä, on ottaa arvo, jonka saamme potkurina Fillerissä, ja asettaa tämän arvon Fillerin leveydeksi. Tämä voidaan helposti toteuttaa inline-tyylillä. Katsotaan miten se tapahtui.

Täyteaineen leveyden asettaminen dynaamisesti sen prop-arvon perusteella

Se siitä! Ainoa potkujen avulla voidaan muuttaa ProgressBarExample: n alkutilaominaisuus arvoon 60:

Katso nyt kaunista edistymispalkkia toiminnassa!

Asioiden kääriminen

Nyt tiedän, että tämä oli vain hyvin yksinkertainen esimerkki, mutta olen sisällyttänyt perusteellisemman version, jonka avulla voit sekoittaa Codepeniin. Se on täysin vuorovaikutteinen ja toivottavasti opettaa sinulle jotain uutta. Jos pidit tästä opetusohjelmasta, kiitos siitä, että annat minulle seuran GitHubissa!

https://github.com/dzuz14

Linkit

Opi reagoimaan ilmaiseksi YouTubessa

Kun olet lukenut tämän artikkelin, rakastan sinua tutustumaan ilmaiseen YouTube-oppaaseeni Reaktista, jossa näytän sinulle kuinka rakentaa pikkukuvien galleria tyhjästä. Anna sille kirjanmerkki, ennen kuin aloitat lukemisen! =)

Täydellinen edistymispalkki-esimerkki Codepenista

DanZuzevich.com