Bileşenler

Card

İlgili içeriği ve işlemleri tek bir yüzeyde bir arada tutar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Card; başlık, açıklama, içerik ve alt bölümden oluşur. Varsayılan Card çerçevelidir (outlined) ve 16 px iç boşluk kullanır. Başlığı olan Card, başlığıyla adlandırılmış bir bölümdür (<section>).

Kart başlığı

Kart açıklaması burada yer alır.

Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.

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

export default function Default() {
  return (
    <Card className="w-full max-w-96">
      <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 burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.</Card.Body>
      <Card.Footer>
        <Button size="sm">Birincil buton</Button>
        <Button size="sm" variant="secondary">
          İkincil buton
        </Button>
      </Card.Footer>
    </Card>
  );
}

Varyantlar

Üç varyant vardır. Çerçeveli (outlined) çoğu ekran içindir. Gölgeli (elevated) kartın sayfanın üstünde durduğunu gösterir; koyu modda gölge yerine yüzey rengi ayırır. Dolgulu (filled) kenarlıksız, renkli bir yüzeydir; bir kartın içindeki ikincil grup için uygundur.

Çerçeveli kart

Kart açıklaması burada yer alır.

Gölgeli kart

Kart açıklaması burada yer alır.

Dolgulu kart

Kart açıklaması burada yer alır.

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

export default function Variants() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <Card variant="outlined">
        <Card.Title>Çerçeveli kart</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card>
      <Card variant="elevated">
        <Card.Title>Gölgeli kart</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card>
      <Card variant="filled">
        <Card.Title>Dolgulu kart</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card>
    </div>
  );
}

İç boşluk

padding iç boşluğu ve parçalar arasını belirler: sm 12 px, md 16 px, lg 24 px. Izgarada yan yana duran kartlarda md, sayfada tek başına duran kartta lg, sık listelerde ve yan panellerde sm kullanın.

Küçük iç boşluk

Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.

Orta iç boşluk

Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.

Geniş iç boşluk

Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.

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

export default function Padding() {
  return (
    <div className="flex w-full flex-wrap items-start gap-xl">
      <Card padding="sm" className="w-72">
        <Card.Title>Küçük iç boşluk</Card.Title>
        <Card.Body>Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.</Card.Body>
      </Card>
      <Card padding="md" className="w-72">
        <Card.Title>Orta iç boşluk</Card.Title>
        <Card.Body>Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.</Card.Body>
      </Card>
      <Card padding="lg" className="w-72">
        <Card.Title>Geniş iç boşluk</Card.Title>
        <Card.Body>Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.</Card.Body>
      </Card>
    </div>
  );
}

Başlıkta işlem ve alt bölüm

Card.Actions, başlık satırının sonuna hizalanır; düzenle gibi kartın tamamına ait tek bir işlem içindir. Card.Footer birincil işlemleri ya da durum ve ikincil bilgileri, kartın tüm genişliğine yayılan, üstte çizgili renkli bir bantta taşır.

Kart başlığı

Kart açıklaması burada yer alır.

Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.

Etkinİkincil metin

import { Badge, Button, Card } from '@bigbang/ui';

export default function WithActions() {
  return (
    <Card className="w-full max-w-md">
      <Card.Header>
        <Card.Title>Kart başlığı</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
        <Card.Actions>
          <Button size="sm" variant="tertiary">
            Düzenle
          </Button>
        </Card.Actions>
      </Card.Header>
      <Card.Body>Kart içeriği burada yer alır. İlgili bilgileri ve işlemleri bir arada tutar.</Card.Body>
      <Card.Footer>
        <Badge tone="success">Etkin</Badge>
        <span className="type-body-sm text-fg-subtle">İkincil metin</span>
      </Card.Footer>
    </Card>
  );
}

Etkileşimli

interactive ile kartın tamamı tek bir hedefi açar. Başlığa bir Card.Link koyun: bağlantının tıklama alanı kartın tamamına yayılır, üzerine gelince kart 2 px yükselir, klavyeyle odaklanınca odak halkası kartın çevresinde görünür. Kartta başka bir işlem varsa Card.Actions ya da Card.Footer içine koyun; ayrı bir sekme durağı olarak tıklanabilir kalır.

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

export default function Interactive() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <Card interactive>
        <Card.Header>
          <Card.Title>
            <Card.Link href="#first">Birinci kart</Card.Link>
          </Card.Title>
          <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
        </Card.Header>
        <Card.Footer>
          <Badge tone="success" size="sm">
            Etkin
          </Badge>
        </Card.Footer>
      </Card>
      <Card interactive variant="elevated">
        <Card.Header>
          <Card.Title>
            <Card.Link href="#second">İkinci kart</Card.Link>
          </Card.Title>
          <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
        </Card.Header>
      </Card>
      <Card interactive variant="filled">
        <Card.Header>
          <Card.Title>
            <Card.Link href="#third">Üçüncü kart</Card.Link>
          </Card.Title>
          <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
        </Card.Header>
      </Card>
    </div>
  );
}

Açık ve koyu mod

Card tüm renklerini yüzey ve kenarlık token’larından alır. Koyu modda shadow-raised sıfırdır; gölgeli kartı yüzey rengi ayırır.

Çerçeveli kart

Kart açıklaması burada yer alır.

Gölgeli kart

Kart açıklaması burada yer alır.

Dolgulu kart

Kart açıklaması burada yer alır.

Çerçeveli kart

Kart açıklaması burada yer alır.

Gölgeli kart

Kart açıklaması burada yer alır.

Dolgulu kart

Kart açıklaması burada yer alır.

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

export default function Variants() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <Card variant="outlined">
        <Card.Title>Çerçeveli kart</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card>
      <Card variant="elevated">
        <Card.Title>Gölgeli kart</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card>
      <Card variant="filled">
        <Card.Title>Dolgulu kart</Card.Title>
        <Card.Description>Kart açıklaması burada yer alır.</Card.Description>
      </Card>
    </div>
  );
}