125k

Progress

PreviousNext

タスクの完了の進行状況を示すインジケーターを表示します。通常は進行状況バーとして表示されます。

BaseRadixReact Aria
"use client"

import * as React from "react"

インストール

pnpm dlx shadcn@latest add progress

使用法

import { Progress } from "@/components/ui/progress"
<Progress value={33} />

ラベル

Field コンポーネントを使用して、進行状況バーにラベルを追加します。

import { Field, FieldLabel } from "@/components/ui/radix/field"
import { Progress } from "@/components/ui/radix/progress"

制御

スライダーで制御できる進行状況バー。

"use client"

import * as React from "react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import * as React from "react"

API リファレンス

詳細については、Radix UI Progress ドキュメントを参照してください。