Как да създадете достъпна лента за напредък с React

Лентите за напредък са страхотни за ангажиране на потребителите, защото предоставят цел за постигане. Вместо да се взирате в уеб страница, чакаща за ресурс, виждате лента за напредъка да се запълва. Лентите за напредък не трябва да се ограничават само до зрящи потребители. Всеки би трябвало да може лесно да разбира вашата лента за напредък.

И така, как да създадете достъпна лента за напредък с React?

как да актуализирам google play store

MAKEUSEOF ВИДЕО НА ДЕНЯ

Създайте компонент на лентата на напредъка

Създайте нов компонент, наречен ProgressBar.js и добавете следния код:

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;

Първият елемент div е контейнерът, а вторият div е действителната лента за напредъка. Елементът span съдържа процента на лентата за напредък.

За целите на достъпността вторият div има следните атрибути:

Роля на прогресивната лента.
aria-valuenow, за да посочи текущата стойност на лентата за напредък.
aria-valuemin за указване на минималната стойност на лентата за напредък.
aria-valuemax за указване на максималната стойност на лентата за напредък.

Атрибутите aria-valuemin и aria-valuemax не са необходими, ако максималната и минималната стойност на лентата за напредък са 0 и 100, тъй като HTML по подразбиране използва тези стойности.

Оформяне на лентата на напредъка

Можете да стилизирате лентата за напредъка, като използвате вградени стилове или a CSS-в-JS библиотека като стилизирани компоненти . И двата подхода осигуряват лесен начин за предаване на подпори от компонента към CSS.

Имате нужда от тази функционалност, защото ширината на лентата за напредък зависи от стойността на напредъка, предадена като реквизити.

как да качвате hd видеоклипове във facebook от android

Можете да използвате тези вградени стилове:

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

Променете връщащата част на компонента, за да включите стилове, както е показано по-долу:

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

Изобразете лентата на напредъка по следния начин:

<ProgressBar progress={50}/>

Това показва лента за напредък с 50 процента завършено.

Изграждане на компоненти в React

Вече можете да създадете достъпна лента за напредъка с проценти, които можете да използвате повторно във всяка част от вашето приложение. С React можете да създавате независими UI компоненти като тези и да ги използвате като градивни елементи на сложно приложение.