Progress
პროცესის მიმდინარეობა Base UI Progress-ზე: ლეიბლი, ლოკალის მიხედვით ფორმატირებული პროცენტი და განუსაზღვრელი (value={null}) მდგომარეობა მოცურავე ზოლით.
მაგალითი
ჯავშნების იმპორტი
სტუმრების სინქრონიზაცია
საწყობის მარაგი
import { Progress } from "@llc-conciergia/ui/progress";
<Progress value={64} label="ჯავშნების იმპორტი" showValue />
<Progress value={null} label="სტუმრების სინქრონიზაცია" />
<Progress value={100} variant="success" size="lg" aria-label="ოთახები მზადაა" />ინსტალაცია
pnpm add @llc-conciergia/uiimport { Progress } from "@llc-conciergia/ui/progress";npx @llc-conciergia/cli add progressnpx shadcn@latest add https://ui.conciergia.co/r/progress.jsonშენიშვნები
- value={null} — განუსაზღვრელი პროგრესი: aria-valuenow არ არის, aria-valuetext ლოკალიზებულია (progress.indeterminate). prefers-reduced-motion-ის დროს ზოლი არ მოძრაობს.
- ლეიბლის გარეშე accessible name-ისთვის გადაეცით aria-label.
- კლიენტის კომპონენტია ("use client"), მაგრამ props serializable-ია — სერვერ-გვერდიდან პირდაპირ გამოიყენება.
Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| value | number | null | — | მიმდინარე მნიშვნელობა (min–max); null — განუსაზღვრელი. |
| min / max | number | 0 / 100 | დიაპაზონი. |
| label | ReactNode | — | ხილული ლეიბლი; progressbar-ის accessible name ხდება. |
| showValue | boolean | false | ფორმატირებული მნიშვნელობა ლეიბლის გვერდით (Intl.NumberFormat, percent). |
| size | "sm" | "md" | "lg" | "md" | ზოლის სიმაღლე. |
| variant | "default" | "success" | "warning" | "destructive" | "default" | ინდიკატორის ფერი. |
| format | Intl.NumberFormatOptions | { style: "percent" } | მნიშვნელობის ფორმატი. |
| getAriaValueText | (formatted, value) => string | — | ეკრანის მკითხველის ტექსტი (კლიენტიდან). |
| children | ReactNode | — | საკუთარი ProgressTrack/ProgressIndicator ნაგულისხმევი ზოლის ნაცვლად. |
| ProgressTrack: size | "sm" | "md" | "lg" | "md" | ტრეკი. |
| ProgressIndicator: variant | "default" | "success" | "warning" | "destructive" | "default" | შევსებული ნაწილი. |