Kaip sukurti prieinamą eigos juostą naudojant „React“.

Pažangos juostos puikiai tinka naudotojų įtraukimui, nes jos suteikia tikslą, kurį reikia pasiekti. Užuot žiūrėję į tinklalapį, laukiantį šaltinio, matote, kaip pildosi eigos juosta. Pažangos juostos neturėtų būti apribotos tik reginčiais vartotojais. Kiekvienas turėtų lengvai suprasti jūsų eigos juostą.

Taigi, kaip sukurti prieinamą eigos juostą naudojant „React“?

Sukurkite eigos juostos komponentą

Sukurkite naują komponentą pavadinimu ProgressBar.js ir pridėkite šį kodą:

konst Progreso juosta = ({progresas}) => {
grąžinti (
<div>
<div role="progreso juosta"
 aria-valuenow={progresas}
 aria-valumin={0}
 aria-valuemax={100}>
<tarpas>{`${progress}%`}</span>
</div>
</div>
 );
};
eksportuotinumatytas Progreso juosta;

Pirmasis div elementas yra konteineris, o antrasis div yra tikroji eigos juosta. span elementas turi eigos juostos procentinę dalį.

Prieinamumo tikslais antrasis div turi šiuos atributus:

• Progreso juostos vaidmuo.
• aria-valuenow, kad nurodytumėte dabartinę eigos juostos reikšmę.
• aria-valuemin, kad būtų nurodyta mažiausia eigos juostos reikšmė.
• aria-valuemax, kad nurodytų didžiausią eigos juostos reikšmę.

Atributai aria-valuemin ir aria-valuemax nėra būtini, jei progreso juostos didžiausios ir minimalios reikšmės yra 0 ir 100, nes HTML nustato šias reikšmes.

Pažangos juostos stiliaus kūrimas

Galite formuoti eigos juostą naudodami eilutinius stilius arba a CSS-in-JS biblioteka kaip stiliaus komponentai. Abu šie metodai suteikia paprastą būdą perduoti rekvizitus iš komponento į CSS.

Jums reikia šios funkcijos, nes eigos juostos plotis priklauso nuo eigos reikšmės, perduodamos kaip rekvizitai.

Galite naudoti šiuos įterptuosius stilius:

konst konteineris = {
 aukštis: 20,
 plotis: "100%",
 fono spalva: "#fff",
 kraštinės spindulys: 50,
 marža: 50
}
konst juosta = {
 aukštis: "100%",
 plotis: `${progress}%`,
 fono spalva: "#90CAF9",
 kraštinės spindulys: "paveldėti",
}
konst etiketė = {
 pamušalas: "1 rem",
 spalva: "#000000",
}

Pakeiskite grąžinamąją komponento dalį, kad įtrauktumėte stilius, kaip parodyta toliau:

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

Pateikite eigos juostą taip:

<Progreso juosta progresas={50}/>

Rodoma eigos juosta, kurioje baigta 50 proc.

Statybos komponentai „React“.

Dabar galite sukurti prieinamą eigos juostą su procentais, kuriuos galite pakartotinai naudoti bet kurioje programos dalyje. Naudodami „React“ galite sukurti nepriklausomus vartotojo sąsajos komponentus, tokius kaip šie, ir naudoti juos kaip sudėtingos programos sudedamąsias dalis.