Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu.
Veenduge, et teie veebirakenduse edenemisribad näeksid head välja ja neid saaksid kasutada kõik.
Edenemisribad on kasutajate kaasamiseks suurepärased, kuna need annavad eesmärgi, mida saavutada. Selle asemel, et vaadata ressurssi ootavat veebilehte, näete edenemisriba täitumist. Edenemisribad ei tohiks piirduda ainult nägevate kasutajatega. Kõik peaksid teie edenemisriba hõlpsalt aru saama.
Niisiis, kuidas luua Reactiga juurdepääsetav edenemisriba?
Looge edenemisriba komponent
Looge uus komponent nimega ProgressBar.js ja lisage järgmine kood:
konst ProgressBar = ({edenemine}) => {
tagasi (
<div>
<div roll="edenemisriba"
aria-valuenow={edenemine}
aria-valumin={0}
aria-valuemax={100}>
<ulatus>{`${progress}%`}</span>
</div>
</div>
);
};
eksportidavaikimisi Edenemisriba;
Esimene div element on konteiner ja teine div on tegelik edenemisriba. Element hõlmab edenemisriba protsenti.
Juurdepääsetavuse huvides on teisel div-l järgmised atribuudid:
- Edenemisriba roll.
- aria-valuenow, et näidata edenemisriba praegust väärtust.
- aria-valuemin, et näidata edenemisriba minimaalset väärtust.
- aria-valuemax, et näidata edenemisriba maksimaalset väärtust.
Atribuudid aria-valuemin ja aria-valuemax ei ole vajalikud, kui edenemisriba maksimum- ja miinimumväärtused on 0 ja 100, kuna HTML-i vaikeväärtused on need.
Edenemisriba stiili kujundamine
Edenemisriba saate stiilida, kasutades tekstisiseseid stiile või a CSS-in-JS teek nagu stiilitud komponendid. Mõlemad lähenemisviisid pakuvad lihtsat viisi rekvisiitide edastamiseks komponendist CSS-i.
Teil on seda funktsiooni vaja, kuna edenemisriba laius sõltub rekvisiitidena edastatud edenemisväärtusest.
Saate kasutada järgmisi tekstisiseseid stiile:
konst konteiner = {
kõrgus: 20,
laius: "100%",
taustavärv: "#fff",
piiriraadius: 50,
marginaal: 50
}konst riba = {
kõrgus: "100%",
laius: `${progress}%`,
taustavärv: "#90CAF9",
piiriraadius: "pärida",
}
konst silt = {
polsterdus: "1 rem",
värv: "#000000",
}
Muutke komponendi tagastusosa stiilide lisamiseks, nagu allpool näidatud:
<div style={container}>
<div style={bar} role="edenemisriba"
aria-valuenow={edenemine}
aria-valumin={0}
aria-valuemax={100}>
<span style={label} >{`${progress}%`}</span>
</div>
</div>
Renderdage edenemisriba järgmiselt:
<ProgressBar progress={50}/>
See kuvab edenemisriba, kus on 50 protsenti valmis.
Ehituskomponendid Reactis
Nüüd saate luua juurdepääsetava edenemisriba protsentidega, mida saate oma rakenduse mis tahes osas uuesti kasutada. Reactiga saate luua selliseid sõltumatuid kasutajaliidese komponente ja kasutada neid keeruka rakenduse ehitusplokkidena.
