پیشرفت

"use client"

import * as React from "react"

نوار پیشرفت گزارش می‌دهد چه مقدار از یک کار انجام شده — مسیری که از 0 تا 100 پر می‌شود. بر پایهٔ Base UI Progress ساخته شده و با دستور پخت نئوبروتالیستی استایل شده: حاشیهٔ ضخیم، سایهٔ سخت، پرشدگی solid.

برای این موارد از آن استفاده کنید:

• آپلود و دانلود فایل — پیشرفت determinate مبتنی بر بایت با درصد نمایان.
• جریان چندمرحله‌ای — آنبوردینگ، checkout و wizard؛ نوار نشان می‌دهد کاربر کجای مسیر است.
• کارهای طولانی — import، export و install که completion را از سرور گزارش می‌دهند.

نصب#

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
کپی

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
کپی

"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 }

استفاده#

کپی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 استفاده کنید.

import {
  Progress,
  ProgressLabel,

کنترل‌شده#

یک نوار پیشرفت که می‌توان آن را با یک slider کنترل کرد.

"use client"

import * as React from "react"

RTL#

برای فعال‌سازی پشتیبانی RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.

"use client"

import * as React from "react"

دسترسی‌پذیری#

Progress یک نشانگر وضعیت است نه کنترل — هرگز فوکوس نمی‌گیرد و تعامل صفحه‌کلید ندارد. Base UI مقدار role="progressbar" با aria-valuemin، aria-valuemax و aria-valuenow رندر می‌کند و ProgressLabel از طریق aria-labelledby خودکار مرتبط می‌شود — آن (یا یک aria-label) را به نوار بدون‌برچسب ترجیح دهید تا صفحه‌خوان بگوید چه چیزی در حال بارگذاری است نه فقط درصد. وقتی completion نامعلوم است value={null} بدهید؛ نوار به وضعیت indeterminate می‌رود.

مرجع API#

مستندات Base UI Progress را ببینید.