Card

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Card } from '@bigbang/ui';

Kaynak

Card.tsx

Storybook

Card · Playground

Card, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Card } from '@bigbang/ui';

<Card>
  <Card.Header>
    <Card.Title>Kart başlığı</Card.Title>
    <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
  </Card.Header>
  <Card.Body>Kart içeriği</Card.Body>
</Card>;

Parça prop tipleri de dışa açılır: CardHeaderProps, CardTitleProps, CardDescriptionProps, CardActionsProps, CardBodyProps, CardFooterProps, CardLinkProps.

Özellikler

variant

Açıklama

Kartın sayfadan nasıl ayrıldığı: outlined 1 px kenarlıkla, elevated gölgeyle, filled renkli bir yüzeyle.

Tür

'outlined' | 'elevated' | 'filled'

Varsayılan

'outlined'

padding

Açıklama

İç boşluk ve parçalar arası boşluk: 12, 16 ya da 24 px. Sayfada tek kart için lg, ızgarada md, sık listelerde ve yan panellerde sm kullanın.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

interactive

Açıklama

Kartın tamamı tek bir hedefi açar: üzerine gelince yükselir ve Card.Link odaklanınca odak halkasını kartın çevresinde gösterir. Başlığa tam olarak bir Card.Link koyun.

Tür

boolean

Varsayılan

false

render

Açıklama

Kökü başka bir öğe olarak çizer, ör. <article /> ya da <li />. Card.Title içeren kart varsayılan olarak <section> olur.

Tür

ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Açıklama

Yalnızca yerleşim için: dış boşluk, genişlik, ızgara yerleşimi. Renk ve iç boşluğu değiştirmek için kullanmayın.

Tür

string

children

Açıklama

Kartın parçaları: Card.Header, Card.Body ve Card.Footer ya da herhangi bir içerik.

Tür

ReactNode

Bunların dışında yerel öznitelikler (id, aria-*) kök öğeye iletilir.

Parçalar

Parça	Öğe	Özellikler
Card.Header	<div>	Yerel öznitelikler. İçinde Card.Actions varsa iki sütunlu ızgara olur.
Card.Title	<h2>-<h6>	level (varsayılan 3). Kartın bölge adıdır; id kart tarafından verilir.
Card.Description	<p>	Yerel öznitelikler.
Card.Actions	<div>	Yerel öznitelikler. Bağlantının üstünde durur (z-1).
Card.Body	<div>	Yerel öznitelikler.
Card.Footer	<div>	Yerel öznitelikler. Bağlantının üstünde durur (z-1).
Card.Link	<a>	Yerel bağlantı öznitelikleri ve render (yönlendirici bağlantısı için).

Veri öznitelikleri

• data-component="card", data-variant, data-interactive: kök öğede.
• data-part: header, title, description, actions, body, footer, link.

Yönlendirici bağlantısı

import { Card } from '@bigbang/ui';
import { Link } from 'react-router';

<Card interactive>
  <Card.Title>
    <Card.Link render={<Link to="/kayit/42" />}>Kart başlığı</Card.Link>
  </Card.Title>
</Card>;

Listede kartlar

<ul className="grid gap-xl md:grid-cols-3">
  {items.map((item) => (
    <Card key={item.id} render={<li />}>
      <Card.Title>{item.title}</Card.Title>
    </Card>
  ))}
</ul>