124k
New

进度

PreviousNext

显示一个指示器，展示任务的完成进度，通常以进度条的形式显示。

Base UIReact AriaRadix UI
Radix UI
x
"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/field"
import { Progress } from "@/components/ui/progress"

受控

一个可以通过滑块控制的进度条。

"use client"

import * as React from "react"

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

请参阅 Radix UI Progress 文档。