Cách tạo thanh tiến trình có thể truy cập bằng React

Cách tạo thanh tiến trình có thể truy cập bằng React

Thanh tiến trình rất tốt cho sự tương tác của người dùng vì chúng cung cấp mục tiêu cần đạt được. Thay vì nhìn chằm chằm vào một trang web chờ đợi một tài nguyên, bạn sẽ thấy một thanh tiến trình đang lấp đầy. Thanh tiến trình không được giới hạn chỉ cho những người dùng có tầm nhìn. Mọi người sẽ có thể hiểu thanh tiến trình của bạn một cách dễ dàng.





Vậy làm cách nào để bạn xây dựng một thanh tiến trình có thể truy cập được với React?



LÀM VIDEO TRONG NGÀY

Tạo thành phần thanh tiến trình

Tạo một thành phần mới có tên ProgressBar.js và thêm mã sau:





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;

Phần tử div đầu tiên là vùng chứa và div thứ hai là thanh tiến trình thực tế. Phần tử nhịp giữ tỷ lệ phần trăm của thanh tiến trình.

Đối với mục đích trợ năng, div thứ hai có các thuộc tính sau:



chuyển tiếp email từ outlook tới gmail
  • Một vai trò của thanh tiến trình.
  • aria-valuenow để chỉ ra giá trị hiện tại của thanh tiến trình.
  • aria-valuemin để chỉ ra giá trị nhỏ nhất của thanh tiến trình.
  • aria-valuemax để chỉ ra giá trị lớn nhất của thanh tiến trình.

Các thuộc tính aria-valuemin và aria-valuemax là không cần thiết nếu các giá trị tối đa và nhỏ nhất của thanh tiến trình là 0 và 100 vì HTML mặc định là các giá trị này.

Tạo kiểu cho thanh tiến trình

Bạn có thể tạo kiểu thanh tiến trình bằng cách sử dụng kiểu nội tuyến hoặc Thư viện CSS-in-JS như các thành phần được tạo kiểu . Cả hai cách tiếp cận này đều cung cấp một cách đơn giản để chuyển các đạo cụ từ thành phần đến CSS.



Bạn cần chức năng này vì chiều rộng của thanh tiến trình phụ thuộc vào giá trị tiến trình được chuyển vào dưới dạng đạo cụ.

khởi động kép linux và windows 10

Bạn có thể sử dụng các kiểu nội tuyến sau:



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

Sửa đổi phần trả về của thành phần để bao gồm các kiểu như được hiển thị bên dưới:

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

Hiển thị thanh tiến trình như thế này:

<ProgressBar progress={50}/>

Điều này hiển thị thanh tiến trình với 50 phần trăm hoàn thành.

Xây dựng các thành phần trong React

Bây giờ bạn có thể tạo một thanh tiến trình có thể truy cập với tỷ lệ phần trăm mà bạn có thể sử dụng lại trong bất kỳ phần nào của ứng dụng của mình. Với React, bạn có thể tạo các thành phần UI độc lập như thế này và sử dụng chúng như các khối xây dựng của một ứng dụng phức tạp.