Cara Membuat Bar Kemajuan Boleh Diakses Dengan React

Bar kemajuan bagus untuk penglibatan pengguna kerana ia menyediakan matlamat untuk dicapai. Daripada menatap halaman web yang menunggu sumber, anda melihat bar kemajuan terisi. Bar kemajuan tidak seharusnya terhad kepada pengguna yang kelihatan sahaja. Semua orang sepatutnya dapat memahami bar kemajuan anda dengan mudah.

Jadi bagaimana anda membina bar kemajuan yang boleh diakses dengan React?

---

---

MAKEUSEOF VIDEO OF THE DAY

Buat Komponen Bar Kemajuan

Buat komponen baharu yang dipanggil ProgressBar.js dan tambah kod berikut:

cara mengekalkan komputer riba semasa ditutup

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 ialah bekas dan div kedua ialah bar kemajuan sebenar. Elemen span memegang peratusan bar kemajuan.

Untuk tujuan kebolehaksesan, div kedua mempunyai atribut berikut:

• Peranan bar kemajuan.
• aria-valuenow untuk menunjukkan nilai semasa bar kemajuan.
• aria-valuemin untuk menunjukkan nilai minimum bar kemajuan.
• aria-valuemax untuk menunjukkan nilai maksimum bar kemajuan.

Atribut aria-valuemin dan aria-valuemax tidak diperlukan jika bar kemajuan maksimum dan nilai minimum ialah 0 dan 100 kerana HTML lalai kepada nilai ini.

Menggayakan Bar Kemajuan

Anda boleh menggayakan bar kemajuan menggunakan gaya sebaris atau a Pustaka CSS-in-JS seperti komponen-gaya . Kedua-dua pendekatan ini menyediakan cara mudah untuk menghantar prop daripada komponen ke CSS.

---

---

Anda memerlukan fungsi ini kerana lebar bar kemajuan bergantung pada nilai kemajuan yang dihantar sebagai prop.

Anda boleh 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 suai bahagian pemulangan komponen untuk memasukkan gaya seperti yang ditunjukkan di bawah:

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

Berikan bar kemajuan seperti ini:

<ProgressBar progress={50}/> 

Ini memaparkan bar kemajuan dengan 50 peratus siap.

Komponen Binaan dalam React

Anda kini boleh membuat bar kemajuan boleh diakses dengan peratusan yang boleh anda gunakan semula dalam mana-mana bahagian aplikasi anda. Dengan React, anda boleh mencipta komponen UI bebas seperti ini dan menggunakannya sebagai blok bangunan aplikasi yang kompleks.