进度

"use client"

import * as React from "react"

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add progress
Copy

用法

🌐 Usage

Copyimport { Progress } from "@/components/ui/progress"

Copy<Progress value={33} />

示例

🌐 Examples

标签

🌐 Label

使用 ProgressLabel 和 ProgressValue 来添加标签和数值显示。

🌐 Use ProgressLabel and ProgressValue to add a label and value display.

import {
  Progress,
  ProgressLabel,

受控

🌐 Controlled

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

🌐 A progress bar that can be controlled by a slider.

"use client"

import * as React from "react"

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

请参阅 Base UI Progress 文档。

🌐 See the Base UI Progress documentation.