Cara Membuat Bilah Kemajuan yang Dapat Diakses Dengan React

Bilah kemajuan sangat bagus untuk keterlibatan pengguna karena memberikan tujuan yang ingin dicapai. Alih-alih menatap halaman web yang menunggu sumber daya, Anda melihat bilah kemajuan terisi. Bilah kemajuan tidak boleh dibatasi hanya untuk pengguna yang dapat melihat. Setiap orang harus dapat memahami bilah kemajuan Anda dengan mudah.

Jadi, bagaimana Anda membuat bilah kemajuan yang dapat diakses dengan React?

Buat Komponen Bilah Kemajuan

Buat komponen baru bernama ProgressBar.js dan tambahkan kode berikut:

const Bilah Kemajuan = ({kemajuan}) => {
kembali (
<div>
<peran div="bilah kemajuan"
 aria-valuenow={kemajuan}
 aria-valuemin={0}
 aria-valuemax={100}>
<menjangkau>{`${kemajuan}%`}</span>
</div>
</div>
 );
};





instagram viewer
eksporbawaan Bilah Kemajuan;

Elemen div pertama adalah container dan div kedua adalah progress bar yang sebenarnya. Elemen rentang menyimpan persentase bilah kemajuan.

Untuk tujuan aksesibilitas, div kedua memiliki atribut berikut:

• Peran bilah kemajuan.
• aria-valuenow untuk menunjukkan nilai progress bar saat ini.
• aria-valuemin untuk menunjukkan nilai minimum bilah kemajuan.
• aria-valuemax untuk menunjukkan nilai maksimum bilah kemajuan.

Atribut aria-valuemin dan aria-valuemax tidak diperlukan jika nilai maksimum dan minimum progress bar adalah 0 dan 100 karena HTML default ke nilai ini.

Menata Progress Bar

Anda dapat menata bilah progres menggunakan gaya sebaris atau a Pustaka CSS-in-JS seperti komponen-gaya. Kedua pendekatan ini menyediakan cara sederhana untuk meneruskan props dari komponen ke CSS.

Anda memerlukan fungsionalitas ini karena lebar bilah progres bergantung pada nilai progres yang diteruskan sebagai alat peraga.

Anda dapat menggunakan gaya sebaris ini:

const wadah = {
 tinggi: 20,
 lebar: "100%",
 warna latar belakang: "#fff",
 borderRadius: 50,
 marjin: 50
}
const bilah = {
 tinggi: "100%",
 lebar: `${kemajuan}%`,
 warna latar belakang: "#90CAF9",
 perbatasanRadius: "mewarisi",
}
const label = {
 lapisan: "1rem",
 warna: "#000000",
}

Ubah bagian pengembalian komponen untuk memasukkan gaya seperti yang ditunjukkan di bawah ini:

<gaya div={wadah}>
<gaya div={bar} peran="bilah kemajuan"
 aria-valuenow={kemajuan}
 aria-valuemin={0}
 aria-valuemax={100}>
<rentang gaya={label} >{`${kemajuan}%`}</span>
</div>
</div>

Render bilah kemajuan seperti ini:

<ProgressBar progress={50}/>

Ini menampilkan bilah kemajuan dengan 50 persen selesai.

Membangun Komponen di React

Anda sekarang dapat membuat bilah kemajuan yang dapat diakses dengan persentase yang dapat Anda gunakan kembali di bagian mana pun dari aplikasi Anda. Dengan React, Anda dapat membuat komponen UI independen seperti ini dan menggunakannya sebagai blok penyusun aplikasi yang kompleks.