İlerleme

"use client"

import * as React from "react"

Progress çubuğu, bir görevin ne kadarının tamamlandığını bildirir — 0'dan 100'e dolan bir şerit. Base UI Progress bileşeni üzerine kuruludur ve neobrütalist reçeteye göre stillendirilmiştir: kalın kenarlık, keskin gölge, düz dolgu.

Şu durumlarda tercih edin:

• Dosya yükleme ve indirme — görünür bir yüzdeyle, bayt bazlı, belirli (determinate) ilerleme.
• Çok adımlı akışlar — kullanıcıya alıştırma, ödeme ve sihirbazlar; çubuk, kullanıcının ne kadar ilerlediğini gösterir.
• Uzun süren işler — tamamlanma durumunu sunucudan bildiren içe aktarma, dışa aktarma ve kurulum işlemleri.

Kurulum#

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
Kopyala

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Kopyala

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

Kullanım#

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

Kopyala<Progress value={33} />

Kompozisyon#

Etiket ve değerle#

Bir etiket ve değer görünümü eklemek için ProgressLabel ve ProgressValue kullanın.

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

KopyalaProgress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Örnekler#

Etiket#

Bir etiket ve değer görünümü eklemek için ProgressLabel ve ProgressValue kullanın.

import {
  Progress,
  ProgressLabel,

Kontrollü#

Bir slider ile kontrol edilebilen bir ilerleme çubuğu.

"use client"

import * as React from "react"

RTL#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Progress bir kontrol değil, durum göstergesidir — hiçbir zaman odak almaz ve klavye etkileşimi yoktur. Base UI, aria-valuemin, aria-valuemax ve aria-valuenow ile role="progressbar" işler; ProgressLabel ise aria-labelledby aracılığıyla otomatik olarak ilişkilendirilir — ekran okuyucuların yalnızca yüzdeyi değil neyin yüklendiğini de söyleyebilmesi için etiketsiz bir çubuk yerine onu (veya bir aria-label) tercih edin. Tamamlanma durumu bilinmiyorsa value={null} geçirin; çubuk belirsiz (indeterminate) duruma geçer.

API Referansı#

Base UI Progress belgelerine bakın.