Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.
Varmista, että verkkosovelluksesi edistymispalkit näyttävät hyviltä ja että kaikki voivat käyttää niitä.
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?
Luo edistymispalkkikomponentti
Luo uusi komponentti nimeltä ProgressBar.js ja lisää seuraava koodi:
konst Edistymispalkki = ({progress}) => {
palata (
<div>
<div role="edistymispalkki"
aria-valuenow={progress}
aria-valumin={0}
aria-valuemax={100}>
<jänneväli>{`${progress}%`}</span>
</div>
</div>
);
};
viedäoletuksena Edistymispalkki;
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:
- 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ä:
konst kontti = {
korkeus: 20,
leveys: "100%",
taustaväri: "#F F F",
reunasäde: 50,
marginaali: 50
}konst palkki = {
korkeus: "100%",
leveys: `${progress}%`,
taustaväri: "#90CAF9",
rajasäde: "periä",
}
konst etiketti = {
pehmuste: "1 rem",
väri: "#000000",
}
Muokkaa komponentin palautusosaa sisällyttämään tyylejä alla olevan kuvan mukaisesti:
<div style={container}>
<div style={bar} role="edistymispalkki"
aria-valuenow={progress}
aria-valumin={0}
aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>
Piirrä edistymispalkki seuraavasti:
<edistymispalkki edistyminen={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.
