Kuinka luoda helppokäyttöinen edistymispalkki Reactilla

Edistymispalkit ovat hyviä käyttäjien sitoutumiseen, koska ne tarjoavat tavoitteen, joka saavutetaan. Sen sijaan, että tuijottaisit resurssia odottavaa verkkosivua, näet edistymispalkin täyttyvän. Edistymispalkkien ei pitäisi rajoittua vain näkeviin käyttäjiin. Kaikkien pitäisi pystyä ymmärtämään edistymispalkkiasi helposti.

Joten miten rakennat esteettömän edistymispalkin Reactin avulla?

PÄIVÄN VIDEON TEKEMINEN

Luo edistymispalkkikomponentti

Luo uusi komponentti nimeltä ProgressBar.js ja lisää seuraava koodi:

const ProgressBar = ({progress}) => { 
    return ( 
        <div> 
            <div role="progressbar" 
                 aria-valuenow={progress} 
                 aria-valuemin={0} 
                 aria-valuemax={100}> 
                <span>{`${progress}%`}</span> 
            </div> 
        </div> 
    ); 
}; 
   
export default ProgressBar;

Ensimmäinen div-elementti on säilö ja toinen div on todellinen edistymispalkki. Span-elementti sisältää edistymispalkin prosenttiosuuden.

Esteettömyyssyistä toisella div:llä on seuraavat määritteet:

paras hdmi -kaapeli 4k 2018: lle

Edistypalkin rooli.
aria-valuenow ilmaisemaan edistymispalkin nykyisen arvon.
aria-valuemin ilmaisemaan edistymispalkin vähimmäisarvon.
aria-valuemax ilmaisemaan edistymispalkin enimmäisarvon.

Attribuutit aria-valuemin ja aria-valuemax eivät ole välttämättömiä, jos edistymispalkin maksimi- ja vähimmäisarvot ovat 0 ja 100, koska HTML käyttää oletusarvoja.

Edistymispalkin muotoilu

Voit muokata edistymispalkin tyyliä käyttämällä upotettuja tyylejä tai a CSS-in-JS-kirjasto, kuten tyylitellyt komponentit . Molemmat lähestymistavat tarjoavat yksinkertaisen tavan siirtää rekvisiitta komponentista CSS:ään.

Tarvitset tämän toiminnon, koska etenemispalkin leveys riippuu rekvisiittana välitetystä edistymisarvosta.

Voit käyttää näitä sisäisiä tyylejä:

const container = { 
    height: 20, 
    width: "100%", 
    backgroundColor: "#fff", 
    borderRadius: 50, 
    margin: 50 
} 
  
const bar = { 
    height: "100%", 
    width: `${progress}%`, 
    backgroundColor: "#90CAF9", 
    borderRadius: "inherit", 
} 
  
const label = { 
    padding: "1rem", 
    color: "#000000", 
}

Muokkaa komponentin palautusosaa sisällyttämään tyylejä alla olevan kuvan mukaisesti:

CB91C07329D9D2A9F1AE877C5FDECF9045636CB

Piirrä edistymispalkki seuraavasti:

<ProgressBar progress={50}/>

Tämä näyttää edistymispalkin, jossa 50 prosenttia on valmis.

Rakennuskomponentit Reactissa

Voit nyt luoda saavutettavissa olevan edistymispalkin prosenttiosuuksilla, joita voit käyttää uudelleen missä tahansa sovelluksesi osassa. Reactin avulla voit luoda tällaisia itsenäisiä käyttöliittymäkomponentteja ja käyttää niitä monimutkaisen sovelluksen rakennuspalikoina.