Kā izveidot pieejamu progresa joslu, izmantojot React

Progresa joslas ir lieliski piemērotas lietotāju iesaistīšanai, jo tās nodrošina sasniedzamo mērķi. Tā vietā, lai skatītos uz tīmekļa lapu, kas gaida kādu resursu, jūs redzat, ka progresa josla aizpildās. Progresa joslas nedrīkst būt ierobežotas tikai ar redzīgiem lietotājiem. Ikvienam ir jāspēj viegli saprast jūsu progresa joslu.

Tātad, kā izveidot pieejamu progresa joslu, izmantojot React?

---

---

kura piegādes lietotne maksā visvairāk

DIENAS VIDEO MAKEUSEOF

Izveidojiet progresa joslas komponentu

Izveidojiet jaunu komponentu ar nosaukumu ProgressBar.js un pievienojiet šādu kodu:

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; 

Pirmais div elements ir konteiners, bet otrais div ir faktiskā norises josla. Elements span satur progresa joslas procentuālo daļu.

Pieejamības nolūkos otrajam div ir šādi atribūti:

• Progresa joslas loma.
• aria-valuenow, lai norādītu progresa joslas pašreizējo vērtību.
• aria-valuemin, lai norādītu progresa joslas minimālo vērtību.
• aria-valuemax, lai norādītu progresa joslas maksimālo vērtību.

Atribūti aria-valuemin un aria-valuemax nav nepieciešami, ja progresa joslas maksimālās un minimālās vērtības ir 0 un 100, jo HTML pēc noklusējuma ir šīs vērtības.

Progresa joslas veidošana

Varat veidot progresa joslu, izmantojot iekļautos stilus vai a CSS-in-JS bibliotēka, piemēram, stilizēti komponenti . Abas šīs pieejas nodrošina vienkāršu veidu, kā pārsūtīt rekvizītus no komponenta uz CSS.

---

---

Šī funkcionalitāte ir nepieciešama, jo progresa joslas platums ir atkarīgs no progresa vērtības, kas tiek nodota kā rekvizīti.

kā iestatīt laiku fitbit versa

Varat izmantot šos iekļautos stilus:

---

---

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", 
} 

Modificējiet komponenta atgriešanās daļu, lai iekļautu stilus, kā parādīts tālāk:

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</span> 
    </div> 
</div> 

Atveidojiet progresa joslu šādi:

<ProgressBar progress={50}/> 

Tiek parādīta progresa josla ar 50 procentiem pabeigtu.

Ēkas sastāvdaļas programmā React

Tagad varat izveidot pieejamu norises joslu ar procentiem, ko varat atkārtoti izmantot jebkurā lietojumprogrammas daļā. Izmantojot React, varat izveidot neatkarīgus lietotāja interfeisa komponentus, piemēram, šos, un izmantot tos kā sarežģītas lietojumprogrammas sastāvdaļas.