Cara Membuat Progress Bar yang Dapat Diakses Dengan React

Cara Membuat Progress Bar 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.





cara memperbaiki usb yang dilindungi tulis

Jadi bagaimana Anda membangun progress bar yang dapat diakses dengan React?



VIDEO MAKEUSEOF HARI INI

Buat Komponen Bilah Kemajuan

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





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;

Elemen div pertama adalah wadah dan div kedua adalah bilah kemajuan 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 dari progress bar.

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

Menata Bilah Kemajuan

Anda dapat menata bilah kemajuan 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 fungsi ini karena lebar bilah kemajuan bergantung pada nilai kemajuan yang diteruskan sebagai alat peraga.

Anda dapat menggunakan gaya sebaris ini:



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

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

<div style={container}> 
    <div style={bar} role="progressbar" 
        aria-valuenow={progress} 
        aria-valuemin={0} 
        aria-valuemax={100}> 
        <span style={label} >{`${progress}%`}</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 pembangun aplikasi yang kompleks.