进度条

使用简单而灵活的进度条，提供有关工作流程或操作进度的最新反馈。

示例

默认进度条。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function BasicExample() { return <ProgressBar now={60} />; } export default BasicExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function BasicExample() {
  return <ProgressBar now={60} />;
}

export default BasicExample;

带标签

添加 label 属性以显示可见的百分比。对于较低的百分比，请考虑添加最小宽度以确保标签的文本完全可见。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function WithLabelExample() { const now = 60; return <ProgressBar now={now} label={`${now}%`} />; } export default WithLabelExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function WithLabelExample() {
  const now = 60;
  return <ProgressBar now={now} label={`${now}%`} />;
}

export default WithLabelExample;

仅屏幕阅读器标签

添加 visuallyHidden 属性以在视觉上隐藏标签。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function ScreenreaderLabelExample() { const now = 60; return <ProgressBar now={now} label={`${now}%`} visuallyHidden />; } export default ScreenreaderLabelExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function ScreenreaderLabelExample() {
  const now = 60;
  return <ProgressBar now={now} label={`${now}%`} visuallyHidden />;
}

export default ScreenreaderLabelExample;

上下文替代方案

进度条使用一些相同的按钮和警报类以保持一致的样式。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function ContextualExample() { return ( <div> <ProgressBar variant="success" now={40} /> <ProgressBar variant="info" now={20} /> <ProgressBar variant="warning" now={60} /> <ProgressBar variant="danger" now={80} /> </div> ); } export default ContextualExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function ContextualExample() {
  return (
    <div>
      <ProgressBar variant="success" now={40} />
      <ProgressBar variant="info" now={20} />
      <ProgressBar variant="warning" now={60} />
      <ProgressBar variant="danger" now={80} />
    </div>
  );
}

export default ContextualExample;

条纹

使用渐变创建条纹效果。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function StripedExample() { return ( <div> <ProgressBar striped variant="success" now={40} /> <ProgressBar striped variant="info" now={20} /> <ProgressBar striped variant="warning" now={60} /> <ProgressBar striped variant="danger" now={80} /> </div> ); } export default StripedExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function StripedExample() {
  return (
    <div>
      <ProgressBar striped variant="success" now={40} />
      <ProgressBar striped variant="info" now={20} />
      <ProgressBar striped variant="warning" now={60} />
      <ProgressBar striped variant="danger" now={80} />
    </div>
  );
}

export default StripedExample;

动画

添加 animated 属性以将条纹从右到左进行动画。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function AnimatedExample() { return <ProgressBar animated now={45} />; } export default AnimatedExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function AnimatedExample() {
  return <ProgressBar animated now={45} />;
}

export default AnimatedExample;

堆叠

嵌套 <ProgressBar /> 以堆叠它们。

结果

加载中...

实时编辑器

import ProgressBar from 'react-bootstrap/ProgressBar'; function StackedExample() { return ( <ProgressBar> <ProgressBar striped variant="success" now={35} key={1} /> <ProgressBar variant="warning" now={20} key={2} /> <ProgressBar striped variant="danger" now={10} key={3} /> </ProgressBar> ); } export default StackedExample;

import ProgressBar from 'react-bootstrap/ProgressBar';

function StackedExample() {
  return (
    <ProgressBar>
      <ProgressBar striped variant="success" now={35} key={1} />
      <ProgressBar variant="warning" now={20} key={2} />
      <ProgressBar striped variant="danger" now={10} key={3} />
    </ProgressBar>
  );
}

export default StackedExample;

API

进度条