Meter
ცნობილ დიაპაზონში გაზომილი მნიშვნელობა (role=meter) — მაგალითად, ოთახების დატვირთვა. low/high ზღვრებით ფერი თავად აირჩევა: optimum მხარე მწვანეა, შუა — ყვითელი, საპირისპირო — წითელი.
მაგალითი
ოთახების დატვირთვა · ივლისი
ოთახების დატვირთვა · ნოემბერი
ოთახების დატვირთვა · თებერვალი
import { Meter } from "@llc-conciergia/ui/meter";
<Meter
value={92}
label="ოთახების დატვირთვა"
showValue
low={40}
high={75}
optimum="high"
/>ინსტალაცია
pnpm add @llc-conciergia/uiimport { Meter } from "@llc-conciergia/ui/meter";npx @llc-conciergia/cli add meternpx shadcn@latest add https://ui.conciergia.co/r/meter.jsonშენიშვნები
Progress-ისგან განსხვავებით Meter პროცესს არ აჩვენებს — ის მდგომარეობაა (დატვირთვა, მარაგი, ადგილი). ზღვრების ლოგიკა ცალკეც არის ექსპორტირებული: getMeterVariant(value, { low, high, optimum }).
Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| value | number | — | მიმდინარე მნიშვნელობა. |
| min / max | number | 0 / 100 | დიაპაზონი. |
| low | number | — | ამაზე ნაკლები — დაბალი ზოლი. |
| high | number | — | ამის ტოლი ან მეტი — მაღალი ზოლი. |
| optimum | "low" | "high" | "low" | რომელი ბოლოა კარგი (success). |
| variant | "default" | "success" | "warning" | "destructive" | — | ცხადი ფერი; ზღვრებით გამოთვლილს ანაცვლებს. |
| label | ReactNode | — | ხილული ლეიბლი და accessible name. |
| showValue | boolean | false | ფორმატირებული მნიშვნელობა ლეიბლის გვერდით. |
| size | "sm" | "md" | "lg" | "md" | ზოლის სიმაღლე. |
| format / getAriaValueText | Intl.NumberFormatOptions / function | — | მნიშვნელობის ფორმატი და ეკრანის მკითხველის ტექსტი. |
| children | ReactNode | — | საკუთარი MeterTrack (size) / MeterIndicator (variant). |