התקדמות

"use client"

import * as React from "react"

פס ה-progress מדווח כמה ממשימה הושלם — מסלול שמתמלא מ-0 עד 100. נבנה על גבי רכיב Base UI Progress ומעוצב לפי המתכון הנאו-ברוטליסטי: מסגרת עבה, צל חד, מילוי אחיד.

השתמשו בו כש:

• העלאות והורדות קבצים — התקדמות determinate מונעת-בתים עם אחוז גלוי.
• זרימות רב-שלביות — onboarding, checkout ואשפים; הפס מראה עד כמה המשתמשים התקדמו.
• עבודות ארוכות — ייבואים, ייצואים והתקנות שמדווחות השלמה מהשרת.

התקנה#

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"

נגישות#

Progress הוא אינדיקטור סטטוס, לא בקרה — הוא אף פעם לא מקבל פוקוס ואין לו אינטראקציות מקלדת. Base UI מרנדר role="progressbar" עם aria-valuemin, aria-valuemax ו-aria-valuenow, ו-ProgressLabel מקושר אוטומטית דרך aria-labelledby — העדיפו אותו (או aria-label) על פני פס בלי שם כדי שקוראי מסך יוכלו לומר מה נטען, לא רק את האחוז. העבירו value={null} כשהשלמה לא ידועה; הפס עובר למצב indeterminate.

תיעוד ה-API#

עיינו בתיעוד של Base UI Progress.