125k

Progress

PreviousNext

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

BaseRadixReact Aria
x
"use client"

import * as React from "react"

インストール

pnpm dlx shadcn@latest add progress

使用法

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

構成

ラベルと値付き

ProgressLabel および ProgressValue を使用して、ラベルと値の表示を追加します。

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

ラベル

ProgressLabel および ProgressValue を使用して、ラベルと値の表示を追加します。

アップロードの進行状況
x
import {
  Progress,
  ProgressLabel,

制御

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

x
"use client"

import * as React from "react"

RTL

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

تقدم الرفع
x
"use client"

import * as React from "react"

API リファレンス

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