Progress
Progressは、進行状況を視覚的に示すためのコンポーネントです。
インポート
import { Progress } from "@yamada-ui/react"
使い方
編集可能な例
<Progress value={18} />
サイズを変更する
編集可能な例
<VStack> <Progress colorScheme="green" value={19} size="xs" /> <Progress colorScheme="pink" value={93} size="sm" /> <Progress colorScheme="purple" value={8} size="md" /> <Progress colorScheme="red" value={18} size="lg" /> </VStack>
カラースキーマを変更する
編集可能な例
<Progress colorScheme="purple" value={18} />
色を変更する
カラースキーマを使わずに色を変更したい場合は、filledTrackColorに色を指定します。
編集可能な例
<Progress filledTrackColor="green.500" value={18} />
スタイルをカスタマイズする
例えば、バーに丸みをつけたい場合の例です。
編集可能な例
<VStack> <Progress colorScheme="orange" value={10} borderRadius="sm" /> <Progress colorScheme="yellow" value={31} rounded="md" /> </VStack>
ストライプを適応する
hasStripeをtrueに設定することで、背景色にストライプを適応できます。
編集可能な例
<Progress hasStripe value={19} />
ストライプにアニメーションを適応する
背景色のストライプにアニメーションを追加したい場合は、isStripeAnimationをtrueに設定します。
編集可能な例
<Progress hasStripe isStripeAnimation value={20} />
アニメーションを適応する
isAnimationをtrueに設定すると、アニメーションが適応されます。
編集可能な例
<Progress isAnimation />
GitHubでこのページを編集する