Thanh tiến trình Bootstrap với các mốc quan trọng

Cung cấp phản hồi cập nhật về tiến trình của quy trình làm việc hoặc hành động với các thanh tiến trình đơn giản nhưng linh hoạt

Thí dụ#

Thanh tiến trình mặc định

import ProgressBar from 'react-bootstrap/ProgressBar';
  return ;
export default BasicExample;

Với nhãn #

Thêm một giá trị

import ProgressBar from 'react-bootstrap/ProgressBar';
function ScreenreaderLabelExample() {
  return ;
export default ScreenreaderLabelExample;

0 để hiển thị tỷ lệ phần trăm có thể nhìn thấy. Đối với tỷ lệ phần trăm thấp, hãy xem xét thêm chiều rộng tối thiểu để đảm bảo văn bản của nhãn hiển thị đầy đủ

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;
export default WithLabelExample;

Nhãn chỉ dành cho trình đọc màn hình#

Thêm một giá đỡ

import ProgressBar from 'react-bootstrap/ProgressBar';
function ScreenreaderLabelExample() {
  return ;
export default ScreenreaderLabelExample;

1 để ẩn nhãn một cách trực quan

import ProgressBar from 'react-bootstrap/ProgressBar';
function ScreenreaderLabelExample() {
  return ;
export default ScreenreaderLabelExample;

Lựa chọn thay thế theo ngữ cảnh #

Các thanh tiến trình sử dụng một số nút giống nhau và các lớp cảnh báo cho các kiểu nhất quán

import ProgressBar from 'react-bootstrap/ProgressBar';
function ContextualExample() {



 
 
 
 
export default ContextualExample;

Sọc #

Sử dụng một gradient để tạo hiệu ứng sọc

import ProgressBar from 'react-bootstrap/ProgressBar';
function StripedExample() {
      
      
      
      
export default StripedExample;

hoạt hình #

Thêm

import ProgressBar from 'react-bootstrap/ProgressBar';
function ScreenreaderLabelExample() {
  return ;
export default ScreenreaderLabelExample;

2 prop để tạo hiệu ứng cho các sọc từ phải sang trái

import ProgressBar from 'react-bootstrap/ProgressBar';
function AnimatedExample() {
  return ;
export default AnimatedExample;

xếp chồng #

Nest

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;
export default WithLabelExample;

0s để xếp chúng

import ProgressBar from 'react-bootstrap/ProgressBar';
function StackedExample() {
      
      
      
export default StackedExample;

API #

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;
export default WithLabelExample;

1Sao chép mã nhập cho thành phần ProgressBar

TênLoạiMặc địnhMô tảhoạt hình_______12

Animate là các sọc từ phải sang trái

những đứa trẻ

Các phần tử con (chỉ cho phép các phần tử có kiểu)

isChild____12nhãn

Hiển thị nhãn đại diện cho tỷ lệ phần trăm trực quan. VÍ DỤ. 60%

tối đa____14

Tiến độ giá trị tối đa có thể đạt được

phút____15

Tiến trình giá trị tối thiểu có thể bắt đầu từ

Hiện nay

Giá trị hiện tại của tiến độ

sọc____12

Sử dụng một gradient để tạo hiệu ứng sọc

khác nhau

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;



export default WithLabelExample;

7.

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;
export default WithLabelExample;

8.

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;
export default WithLabelExample;

9.

import ProgressBar from 'react-bootstrap/ProgressBar';
function ScreenreaderLabelExample() {
  return ;
export default ScreenreaderLabelExample;

0

Đặt lớp nền của thanh tiến trình

trực quanẨn

import ProgressBar from 'react-bootstrap/ProgressBar';
function WithLabelExample() {
  return ;
export default WithLabelExample;

2

Ẩn nhãn trực quan

bsPrefix

import ProgressBar from 'react-bootstrap/ProgressBar';
function ScreenreaderLabelExample() {
  return ;
export default ScreenreaderLabelExample;

2

Thay đổi tên lớp cơ sở CSS thành phần cơ bản và tiền tố tên lớp sửa đổi. Đây là một lối thoát hiểm để làm việc với css bootstrap được tùy chỉnh nhiều