React ile erişilebilir bir ilerleme çubuğu oluşturmak için aşağıdaki adımları izleyebilirsiniz:
İlk olarak, React uygulamanızda react-aria paketini yükleyin. Bu paket, erişilebilirlik konusunda yardımcı olan bir dizi bileşen ve kancalar içerir.
bash
npm install @react-aria/progressbar
İlerleme çubuğunu temsil etmek için bir ProgressBar bileşeni oluşturun. Bu bileşen, useProgressBar kancasını kullanarak erişilebilirlik özelliklerini ekleyecektir.
import { useProgressBar } from ‘@react-aria/progressbar’;
function ProgressBar({ value, minValue, maxValue, label }) {
const { progressBarProps, labelProps } = useProgressBar({
value,
minValue,
maxValue,
label,
});
return (
<div>
<div {...progressBarProps} style={{ width: `${value}%` }}>
<span className="visually-hidden">{label}</span>
</div>
<div {...labelProps}>{label}</div>
</div>
);
}
useProgressBar kancasının sunduğu progressBarProps ve labelProps özelliklerini, div etiketinde kullanın. progressBarProps özellikleri, ilerleme çubuğu için gerekli tüm aria özniteliklerini içerir. labelProps, ilerleme çubuğunun yanındaki metni etiketlemek için kullanılır.
Gerekli değerleri ProgressBar bileşenine geçirin.
jsx
function App() {
return (
<div>
<h1>File upload progress</h1>
<ProgressBar value={50} minValue={0} maxValue={100} label=”Uploading file” />
</div>
);
}
CSS kullanarak ilerleme çubuğunun görünümünü özelleştirin.
css
div[role=”progressbar”] {
height: 10px;
background-color: #f1f1f1;
border-radius: 5px;
margin-bottom: 10px;
}
div[role="progressbar"] > div {
height: 100%;
border-radius: 5px;
background-color: #4caf50;
transition: width 0.2s ease-in;
}
Yukarıdaki adımları takip ederek, erişilebilir bir ilerleme çubuğu oluşturabilirsiniz.