CircleProgress
CircleProgressは、進行状況を円形のプログレスバーで表示するコンポーネントです。
インポート
import { CircleProgress, CircleProgressLabel } from "@yamada-ui/react"
使い方
編集可能な例
<CircleProgress aria-label="Storage space" value={19} />
サイズを変更する
サイズを変更したい場合は、boxSizeに文字列または数値を設定します。
編集可能な例
<CircleProgress aria-label="Storage space" value={18} boxSize={32} />
太さを変更する
プログレスバーの太さを変更をしたい場合は、thicknessに文字列または数値を設定します。
編集可能な例
<CircleProgress aria-label="Storage space" value={31} thickness={1} />
ラベルを追加する
編集可能な例
<CircleProgress aria-label="Storage space" boxSize="120px" min={0} max={1000} value={444} color="purple.500" trackColor="green.300" > <CircleProgressLabel color="purple.500">444%</CircleProgressLabel> </CircleProgress>
角を丸くする
isRoundedをtrueにすることで、プログレスバーを丸くすることができます。
編集可能な例
<CircleProgress aria-label="Storage space" value={18} isRounded />
アニメーションを適応する
isAnimationをtrueに設定すると、アニメーションが適応されます。
編集可能な例
<CircleProgress value={18} isAnimation />
GitHubでこのページを編集する