Progress
Progressは、進行状況を視覚的に示すためのコンポーネントです。
<Progress value={50} />
使い方
import { Progress } from "@yamada-ui/react"
import { Progress } from "@/components/ui"
import { Progress } from "@workspaces/ui"
<Progress value={50} />
バリアントを変更する
<VStack>
<For each={["outline", "subtle"]}>
{(variant, index) => (
<Progress
key={index}
aria-label="Storage space"
colorScheme="success"
variant={variant}
value={50}
/>
)}
</For>
</VStack>
サイズを変更する
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => (
<Progress key={index} aria-label="Storage space" value={31} size={size} />
)}
</For>
</VStack>
カラースキームを変更する
<Progress aria-label="Storage space" colorScheme="purple" value={18} />
形を変更する
<VStack>
<For each={["rounded", "square", "circle"]}>
{(shape, index) => (
<Progress
key={index}
aria-label="Storage space"
shape={shape}
value={50}
/>
)}
</For>
</VStack>
レンジの色を変更する
レンジの色を変更する場合は、rangeColorに色を設定します。
<Progress aria-label="Storage space" rangeColor="red" value={18} />
トラックの色を変更する
トラックの色を変更する場合は、trackColorに色を設定します。
<Progress
aria-label="Storage space"
trackColor="green/50"
rangeColor="green"
value={50}
/>
ストライプを使う
ストライプを使う場合は、stripedをtrueにします。
<Progress aria-label="Storage space" striped value={19} />
ストライプにアニメーションを使う
ストライプにアニメーションを使う場合は、animatedをtrueに設定します。
<Progress aria-label="Storage space" striped animated value={20} />
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)または文字列を設定します。
<Progress
aria-label="Storage space"
striped
animated
duration="3s"
value={50}
/>
アニメーションを使う
アニメーションを使う場合は、valueをnullに設定します。
<Progress value={null} />
Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。