Card
Birden fazla görsel varyanta sahip bileştirilebilir içerik yüzeyi.
Card.tsx
++
Mimari Blueprint Kartı
Teknik köşe artıları ve hassas çerçeve yapısı
v2.4.0
Kart bileşeni başlık aksiyonları, alt bilgi bölümleri ve modern durum varyantlarıyla tam uyumludur.
48 Bileşen Kayıtlı100% TS Uyumlu
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/card.jsonKullanım Örneği
import { Card, CardContent, CardHeader, CardTitle } from "@/components/data-display/Card"
<Card as="article" variant="elevated">
<CardHeader action={<Button size="sm">Aç</Button>}>
<CardTitle as="h2">Proje özeti</CardTitle>
</CardHeader>
<CardContent>...</CardContent>
</Card>Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| variant | "default" | "blueprint" | "outline" | "ghost" | "elevated" | "sage" | "default" | Kartın görsel yüzeyi. |
| padding | "none" | "sm" | "md" | "lg" | "md" | İç boşluk ölçeği. |
| crosshairs | boolean | false | Dekoratif teknik köşe işaretlerini gösterir. |
| interactive | boolean | false | Etkileşimli hover ve active görünümü uygular. |
| as | "div" | "article" | "section" | "div" | Semantik kapsayıcı. |
| CardTitle.as | "h2" | "h3" | "h4" | "h5" | "h6" | "h3" | Kart başlığının seviyesi. |
| CardHeader.actionsLabel | string | "Kart aksiyonları" | Header aksiyon grubunun erişilebilir adı. |