Postęp

"use client"

import * as React from "react"

Pasek postępu informuje, jaka część zadania jest ukończona — tor wypełniający się od 0 do 100. Zbudowany na komponencie Base UI Progress i ostylowany zgodnie z neobrutalistyczną recepturą: gruba ramka, twardy cień, jednolite wypełnienie.

Sięgnij po ten komponent, gdy:

• Przesyłanie i pobieranie plików — określony, liczony w bajtach postęp z widocznym procentem.
• Przepływy wieloetapowe — onboarding, płatność i kreatory; pasek pokazuje, jak daleko zaszedł użytkownik.
• Długotrwałe zadania — importy, eksporty i instalacje, które raportują ukończenie z serwera.

Instalacja#

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
Kopiuj

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

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

Użycie#

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

Kopiuj<Progress value={33} />

Kompozycja#

Z etykietą i wartością#

Użyj ProgressLabel i ProgressValue, aby dodać wyświetlanie etykiety i wartości.

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

KopiujProgress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Przykłady#

Etykieta#

Użyj ProgressLabel i ProgressValue, aby dodać wyświetlanie etykiety i wartości.

import {
  Progress,
  ProgressLabel,

Kontrolowany#

Pasek postępu, którym można sterować za pomocą slidera.

"use client"

import * as React from "react"

RTL#

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność#

Progress to wskaźnik stanu, a nie kontrolka — nigdy nie przyjmuje fokusu i nie ma żadnej obsługi klawiatury. Base UI renderuje role="progressbar" z aria-valuemin, aria-valuemax i aria-valuenow, a ProgressLabel jest wiązany automatycznie przez aria-labelledby — wybieraj go (lub aria-label) zamiast paska bez etykiety, aby czytniki ekranu mogły powiedzieć, co się ładuje, a nie tylko podać procent. Gdy stopień ukończenia jest nieznany, przekaż value={null} — pasek przełączy się w stan nieokreślony.

Referencja API#

Zobacz dokumentację Base UI Progress.