シンプルでありながら柔軟なプログレスバーを使用して、ワークフローまたはアクションの進捗状況に関する最新のフィードバックを提供できます。
デフォルトのプログレスバー。
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;
スクリーンリーダー用のラベルのみ
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 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;
アニメーション
右から左にストライプをアニメートするには、animated プロパティを追加します。
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;
API
ProgressBar