Divider
Bo'limlarni ajratuvchi 1px chiziq: gorizontal yoki vertikal, o'rtasida matn bilan.
Mahsulotlar220 000 so'm
Yetkazib berish25 000 so'm
Jami245 000 so'm
'use client';
import { Divider } from '@akhatmirzo/ui';
export default function DividerBasic() {
return (
<div className="flex w-full max-w-sm flex-col gap-3 text-sm text-text">
<div className="flex justify-between">
<span>Mahsulotlar</span>
<span>220 000 so'm</span>
</div>
<div className="flex justify-between text-text-muted">
<span>Yetkazib berish</span>
<span>25 000 so'm</span>
</div>
<Divider />
<div className="flex justify-between font-semibold">
<span>Jami</span>
<span>245 000 so'm</span>
</div>
</div>
);
}
Import
import { Divider } from '@akhatmirzo/ui';Qachon ishlatish
- Mazmunan farq qiladigan bo'laklarni ajratish uchun — chekdagi jami summa, menyu guruhlari, karta ichidagi bo'limlar.
- Ko'pincha bo'shliq yetarli. Har bir element orasiga chiziq qo'ymang — sahifa "panjara"ga aylanadi.
- Muqobil yo'llar orasida —
label="yoki": "Telefon orqali kirish" / "Google orqali kirish". - Faqat bezak bo'lsa (masalan, navigatsiya bandlari orasida) —
decorative.
Matn bilan
label chiziq o'rtasiga matn qo'yadi. Matn satr bo'lsa, aria-label sifatida ham ishlatiladi.
yoki
'use client';
import { Button, Divider } from '@akhatmirzo/ui';
export default function DividerLabel() {
return (
<div className="flex w-full max-w-sm flex-col gap-4">
<Button variant="primary" fullWidth>
Telefon orqali kirish
</Button>
<Divider label="yoki" />
<Button variant="outline" fullWidth>
Google orqali kirish
</Button>
</div>
);
}
Vertikal
orientation="vertical" — qator ichida, balandligi ota elementga cho'ziladi. Ota elementga
balandlik bering (h-5) yoki items-stretch.
Bosh sahifaBuyurtmalarSozlamalar
'use client';
import { Divider } from '@akhatmirzo/ui';
export default function DividerVertical() {
return (
<div className="flex h-5 items-center gap-3 text-sm font-medium text-text-subtle">
<span>Bosh sahifa</span>
<Divider orientation="vertical" decorative />
<span>Buyurtmalar</span>
<Divider orientation="vertical" decorative />
<span>Sozlamalar</span>
</div>
);
}
Props
Divider qolgan barcha <div> atributlarini qabul qiladi. Rangni className bilan
o'zgartirasiz, masalan bg-border-strong.
| Prop | Tip | Standart | Tavsif |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Yo'nalish |
label | ReactNode | — | O'rtadagi matn ("yoki") |
decorative | boolean | false | Faqat bezak — ekran o'quvchidan yashiriladi (role="none") |
Ildiz elementda data-orientation atributi bor.
Accessibility
role="separator"vaaria-orientation— ekran o'quvchi bo'limlar chegarasini aytadi.labelsatr bo'lsa, ajratuvchiningaria-labeliga aylanadi.decorative—role="none": ma'nosiz chiziqlar o'qilmaydi. Navigatsiya bandlari, toolbar guruhlari orasidagi chiziqlar uchun.