Jak stworzyć dostępny pasek postępu w React

Paski postępu świetnie nadają się do zaangażowania użytkowników, ponieważ zapewniają cel do osiągnięcia. Zamiast patrzeć na stronę internetową czekającą na zasób, widzisz wypełniający się pasek postępu. Paski postępu nie powinny ograniczać się tylko do widzących użytkowników. Każdy powinien z łatwością zrozumieć Twój pasek postępu.

Jak więc zbudować dostępny pasek postępu w React?

MAKEUSEOF WIDEO DNIA

Utwórz komponent paska postępu

Utwórz nowy komponent o nazwie ProgressBar.js i dodaj następujący kod:

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;

Pierwszy element div to kontener, a drugi div to rzeczywisty pasek postępu. Element span zawiera procent paska postępu.

Dla celów ułatwień dostępu, drugi div ma następujące atrybuty:

Rola paska postępu.
aria-valuenow, aby wskazać bieżącą wartość paska postępu.
aria-valuemin, aby wskazać minimalną wartość paska postępu.
aria-valuemax wskazuje maksymalną wartość paska postępu.

Atrybuty aria-valuemin i aria-valuemax nie są konieczne, jeśli maksymalne i minimalne wartości paska postępu to 0 i 100, ponieważ HTML domyślnie przyjmuje te wartości.

Stylizacja paska postępu

Możesz stylizować pasek postępu za pomocą wbudowanych stylów lub a Biblioteka CSS-in-JS, taka jak styled-components . Oba te podejścia zapewniają prosty sposób przekazywania właściwości z komponentu do CSS.

Potrzebujesz tej funkcji, ponieważ szerokość paska postępu zależy od wartości postępu przekazanej jako rekwizyty.

jak sprawdzić system zabezpieczeń Wi-Fi w systemie Windows 10

Możesz użyć tych stylów wbudowanych:

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

Zmodyfikuj zwracaną część komponentu, aby zawierała style, jak pokazano poniżej:

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

Wyrenderuj pasek postępu w ten sposób:

<ProgressBar progress={50}/>

Spowoduje to wyświetlenie paska postępu z 50 procentami ukończenia.

Budowanie komponentów w React

Możesz teraz utworzyć dostępny pasek postępu z wartościami procentowymi, które możesz ponownie wykorzystać w dowolnej części aplikacji. Dzięki React możesz tworzyć niezależne komponenty interfejsu użytkownika, takie jak te i używać ich jako bloków konstrukcyjnych złożonej aplikacji.