Card
Kontent bloki: Card.Header, Card.Body va Card.Footer bilan yig'iladi, havola sifatida ham ishlaydi.
Buyurtma #1042
Bugun, 14:20
'use client';
import { Avatar, Badge, Button, Card } from '@akhatmirzo/ui';
export default function CardBasic() {
return (
<Card className="w-full max-w-md">
<Card.Header
title="Buyurtma #1042"
description="Bugun, 14:20"
action={
<Badge color="primary" dot>
Yangi
</Badge>
}
/>
<Card.Body>
<div className="flex items-center gap-3">
<Avatar name="Sarvar Abduxoliqov" size="sm" />
<div className="flex flex-col">
<span className="font-medium">Sarvar Abduxoliqov</span>
<span className="text-text-muted">3 ta mahsulot · 245 000 so'm</span>
</div>
</div>
</Card.Body>
<Card.Footer className="justify-end">
<Button variant="ghost">Bekor qilish</Button>
<Button variant="primary">Tasdiqlash</Button>
</Card.Footer>
</Card>
);
}
Import
import { Card } from '@akhatmirzo/ui';Qachon ishlatish
- Bir mavzudagi ma'lumotni guruhlash uchun — buyurtma, mahsulot, statistika, sozlamalar bo'limi.
- Kompozitsiyadan foydalaning:
Card.Header(sarlavha, izoh, o'ngdagi harakat),Card.Body,Card.Footer. Hammasi ixtiyoriy. - Butun karta bosiladigan bo'lsa —
interactivevaasChildbilan<a>yoki<button>bering,<div onClick>emas. - Kartani kartaning ichiga qo'ymang. Ichki guruhlash uchun
Divideryoki bo'shliq yetarli.
Variantlar
elevated (standart) — soya va chegara, oq fonda ajralib turadi. outline — faqat chegara,
zich ro'yxatlar uchun. soft — chegarasiz, surface-muted fon.
Elevated
Soya va chegara (standart)
Outline
Faqat chegara
Soft
Och kulrang fon
'use client';
import { Card } from '@akhatmirzo/ui';
export default function CardVariants() {
return (
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
<Card variant="elevated" padding="sm">
<Card.Header title="Elevated" description="Soya va chegara (standart)" />
</Card>
<Card variant="outline" padding="sm">
<Card.Header title="Outline" description="Faqat chegara" />
</Card>
<Card variant="soft" padding="sm">
<Card.Header title="Soft" description="Och kulrang fon" />
</Card>
</div>
);
}
Ichki bo'shliq
padding: none — 0, sm — 16px, md (standart) — 24px, lg — 32px. Bo'limlar orasidagi
masofa ham shunga moslashadi.
'use client';
import { Card } from '@akhatmirzo/ui';
const paddings = [
{ padding: 'sm', px: 16 },
{ padding: 'md', px: 24 },
{ padding: 'lg', px: 32 },
] as const;
export default function CardPadding() {
return (
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
{paddings.map(({ padding, px }) => (
<Card key={padding} variant="outline" padding={padding}>
<div className="rounded-md bg-primary-soft p-2 text-xs font-medium text-primary-soft-foreground">
{padding} · {px}px
</div>
</Card>
))}
</div>
);
}
Rasm bilan
padding="none" va overflow-hidden — rasm karta chetiga tegib turadi, matnga bo'shliqni
o'zingiz berasiz.
Samarqand bo'ylab sayohat
2 kun · 4 ta joy
'use client';
import { Badge, Card } from '@akhatmirzo/ui';
export default function CardMedia() {
return (
<Card padding="none" className="w-full max-w-sm overflow-hidden">
<div className="h-32 bg-linear-to-br from-primary to-info" />
<div className="flex flex-col gap-3 p-6">
<Card.Header title="Samarqand bo'ylab sayohat" description="2 kun · 4 ta joy" />
<Card.Footer>
<Badge color="success" size="sm">
Joy bor
</Badge>
<Badge size="sm">Guruh</Badge>
</Card.Footer>
</div>
</Card>
);
}
Bosiladigan karta
interactive hover'da soyani oshiradi va kursorni "qo'l" qiladi. Bu faqat stil — klaviatura
uchun asChild bilan <a> yoki <button> bering: shunda karta Tab bilan fokuslanadi va
Enter bilan ochiladi.
'use client';
import { Card } from '@akhatmirzo/ui';
const reports = [
{ title: 'Sotuvlar', description: "Oktyabr · 48 250 000 so'm" },
{ title: 'Mijozlar', description: '1 204 ta faol mijoz' },
];
export default function CardInteractive() {
return (
<div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
{reports.map((report) => (
<Card key={report.title} variant="outline" interactive asChild>
<a href="#props">
<Card.Header title={report.title} description={report.description} />
</a>
</Card>
))}
</div>
);
}
import Link from 'next/link';
<Card interactive asChild>
<Link href="/hisobotlar/sotuv">
<Card.Header title="Sotuvlar" description="Oktyabr" />
</Link>
</Card>;Props
Card
Card qolgan barcha <div> atributlarini qabul qiladi.
| Prop | Tip | Standart | Tavsif |
|---|---|---|---|
variant | 'elevated' | 'outline' | 'soft' | 'elevated' | Ko'rinish |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Ichki bo'shliq: 0 / 16 / 24 / 32px |
interactive | boolean | null | false | Hover va fokus ko'rinishi (faqat stil) |
asChild | boolean | false | O'z elementi o'rniga bolasini render qiladi (masalan, <a>) |
Card.Header
CardHeader nomi bilan ham eksport qilinadi. Qolgan <div> atributlarini qabul qiladi;
children sarlavha va izoh ostiga qo'shiladi.
| Prop | Tip | Standart | Tavsif |
|---|---|---|---|
title | ReactNode | — | Sarlavha (<h3>) |
description | ReactNode | — | Sarlavha ostidagi xira matn |
action | ReactNode | — | O'ng tomondagi element: badge, tugma, menyu |
Card.Body va Card.Footer
CardBody va CardFooter — oddiy <div> lar, barcha atributlarini qabul qiladi. Body matnni
text-sm qiladi, Footer bolalarni bir qatorga terib, gap-2 bilan joylaydi (o'ngga surish
uchun className="justify-end").
Data atributlari
Card ildizida: data-variant, data-padding, data-interactive. Stilni boshqa elementga
qo'llash uchun cardVariants ham eksport qilinadi.
Accessibility
- Oddiy
<div>— rol qo'shilmaydi. Mazmunli bo'lim bo'lsa,asChildbilan<section>yoki<article>bering. Card.Headersarlavhasi<h3>. Sahifadagi sarlavhalar tartibiga mos kelmasa,titleo'rnigachildrenga o'z sarlavhangizni yozing.- Bosiladigan karta faqat
asChildbilan haqiqiy<a>/<button>bo'lganda klaviaturada ishlaydi; fokus halqasi butun kartaga chiziladi.