Tiến trình

"use client"

import * as React from "react"

Thanh tiến trình cho biết một công việc đã xong đến đâu — một đường ray được lấp dần từ 0 đến 100. Được xây dựng trên thành phần Base UI Progress và tạo kiểu theo công thức neobrutalist: viền dày, bóng đổ đậm, phần lấp màu đặc.

Nên dùng khi:

• Tải tệp lên và tải xuống — tiến trình xác định, tính theo số byte, kèm phần trăm hiển thị.
• Luồng nhiều bước — làm quen, thanh toán và các trình hướng dẫn; thanh cho thấy người dùng đã đi được bao xa.
• Công việc chạy dài — nhập, xuất và cài đặt, với mức hoàn thành do phía server báo về.

Cài đặt#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json
Sao chép

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Sao chép

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

Cách dùng#

Sao chépimport { Progress } from "@/components/ui/progress"

Sao chép<Progress value={33} />

Kết hợp#

Với nhãn và giá trị#

Dùng ProgressLabel và ProgressValue để thêm phần hiển thị nhãn và giá trị.

Sao chépimport {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Sao chépProgress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Ví dụ#

Nhãn#

Dùng ProgressLabel và ProgressValue để thêm phần hiển thị nhãn và giá trị.

import {
  Progress,
  ProgressLabel,

Có kiểm soát#

Một thanh tiến trình có thể được điều khiển bằng một slider.

"use client"

import * as React from "react"

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Progress là một chỉ báo trạng thái, không phải một điều khiển — nó không bao giờ nhận focus và không có tương tác bàn phím nào. Base UI render role="progressbar" cùng aria-valuemin, aria-valuemax và aria-valuenow, còn ProgressLabel được liên kết tự động qua aria-labelledby — hãy ưu tiên dùng nó (hoặc một aria-label) thay vì để thanh không có nhãn, để trình đọc màn hình nói được là cái gì đang tải chứ không chỉ đọc phần trăm. Truyền value={null} khi chưa biết mức hoàn thành; thanh sẽ chuyển sang trạng thái không xác định.

Tham chiếu API#

Xem tài liệu Base UI Progress.