التقدم

"use client"

import * as React from "react"

يشير شريط التقدم إلى نسبة إنجاز المهمة — وهو شريط يمتلئ من 0 إلى 100. تم إنشاؤه باستخدام مكون Base UI Progress وتصميمه وفقًا لأسلوب «النيوبروتالية»: حدود سميكة، ظل حاد، تعبئة صلبة.

استخدمه عندما:

• تحميل الملفات وتنزيلها — تقدم محدد ومقيس بالبايت مع نسبة مئوية مرئية.
• التدفقات متعددة الخطوات — التسجيل، وإتمام عملية الدفع، والمعالجات؛ حيث يُظهر الشريط مدى تقدم المستخدم.
• المهام طويلة الأمد — عمليات الاستيراد والتصدير والتثبيت التي تُبلغ عن اكتمالها من الخادم.

التثبيت#

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,

مُتحكَّم به#

شريط تقدّم يمكن التحكّم فيه بواسطة شريط تمرير.

"use client"

import * as React from "react"

RTL#

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

إمكانية الوصول#

يُعد «التقدم» مؤشرًا للحالة، وليس عنصر تحكم — فهو لا يستحوذ على التركيز أبدًا ولا يتفاعل مع لوحة المفاتيح. تعرض واجهة المستخدم الأساسية role="progressbar" مع aria-valuemin، وaria-valuemax، وaria-valuenow، ويتم ربط ProgressLabel تلقائيًا عبر aria-labelledby — يُفضل استخدامه (أو aria-label) بدلاً من شريط غير مسمى حتى تتمكن برامج قراءة الشاشة من ذكر ما يتم تحميله، وليس النسبة المئوية فقط. قم بتمرير value={null} عندما يكون الإكمال غير معروف؛ حيث يتحول الشريط إلى حالة غير محددة.

مرجع API#

راجع وثائق Base UI Progress.