Bileşenler

DescriptionList

Bir kaydın alanlarını terim ve değer çiftleri olarak, yerel dl, dt ve dd öğeleriyle gösterir.

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

items ile satırları verin. Her satır bir terim ve bir değer taşır. Varsayılan yerleşim inlinedır: 1024 px’ten geniş ekranda terim solda, değer sağdadır; daha dar ekranda alt alta durur.

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

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

export default function Default() {
  return (
    <DescriptionList
      className="w-full max-w-2xl"
      items={[
        { id: 'name', term: 'Ad', details: 'Birinci öğe' },
        { id: 'status', term: 'Durum', details: 'Etkin' },
        { id: 'created', term: 'Oluşturulma tarihi', details: '28 Ekim 2026' },
        { id: 'description', term: 'Açıklama', details: 'Kısa bir açıklama burada yer alır.' },
      ]}
    />
  );
}

Yerleşimler

inline terimi değerin soluna, stacked üstüne koyar, grid satırları sütunlara dizer. columns (1, 2 ya da 3) yalnızca grid içindir ve 1024 px’ten itibaren geçerlidir; daha dar ekranda tek sütun olur.

Satır içi

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Alt alta

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Izgara

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

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

const items = [
  { id: 'name', term: 'Ad', details: 'Birinci öğe' },
  { id: 'status', term: 'Durum', details: 'Etkin' },
  { id: 'created', term: 'Oluşturulma tarihi', details: '28 Ekim 2026' },
  { id: 'description', term: 'Açıklama', details: 'Kısa bir açıklama burada yer alır.' },
];

export default function Layouts() {
  return (
    <div className="flex w-full max-w-3xl flex-col gap-4xl">
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Satır içi</h3>
        <DescriptionList layout="inline" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Alt alta</h3>
        <DescriptionList layout="stacked" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Izgara</h3>
        <DescriptionList layout="grid" columns={2} items={items} dividers />
      </section>
    </div>
  );
}

Satır sonunda işlem

action, satırın sonuna bir denetim koyar; kopyala ya da düzenle gibi. Her işlem ayrı bir sekme durağıdır.

Kimlik: ITEM-1024
Ad: Birinci öğe
Açıklama: Kısa bir açıklama burada yer alır.

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

export default function WithActions() {
  return (
    <DescriptionList
      className="w-full max-w-2xl"
      dividers
      items={[
        {
          id: 'identifier',
          term: 'Kimlik',
          details: 'ITEM-1024',
          action: (
            <Button size="sm" variant="tertiary">
              Kopyala
            </Button>
          ),
        },
        { id: 'name', term: 'Ad', details: 'Birinci öğe' },
        {
          id: 'description',
          term: 'Açıklama',
          details: 'Kısa bir açıklama burada yer alır.',
          action: (
            <Button size="sm" variant="tertiary">
              Düzenle
            </Button>
          ),
        },
      ]}
    />
  );
}

Boş ve uzun değer

Boş değer (null, undefined, boş metin) çizgi (—) olarak görünür ve ekran okuyucuya “bilgi yok” der. Uzun değer, boşluksuz olsa da satır kırar.

Ad: Birinci öğe
Durum: bilgi yok
Açıklama: Çok uzun bir değer, boşluksuz yazıldığında bile satır kırılır: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

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

export default function EmptyAndLong() {
  return (
    <DescriptionList
      className="w-full max-w-md"
      dividers
      items={[
        { id: 'name', term: 'Ad', details: 'Birinci öğe' },
        { id: 'status', term: 'Durum', details: null },
        { id: 'description', term: 'Açıklama', details: 'Çok uzun bir değer, boşluksuz yazıldığında bile satır kırılır: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789' },
      ]}
    />
  );
}

Parçalarla

Özel satırlar için DescriptionList.Item, Term, Details ve Action parçalarını kullanın.

Ad: Birinci öğe
Durum: bilgi yok

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

export default function Parts() {
  return (
    <DescriptionList className="w-full max-w-2xl" size="sm">
      <DescriptionList.Item>
        <DescriptionList.Term>Ad</DescriptionList.Term>
        <DescriptionList.Details>Birinci öğe</DescriptionList.Details>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Durum</DescriptionList.Term>
        <DescriptionList.Details />
      </DescriptionList.Item>
    </DescriptionList>
  );
}

Açık ve koyu mod

DescriptionList tüm renklerini metin ve kenarlık token’larından alır.

Satır içi

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Alt alta

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Izgara

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Satır içi

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Alt alta

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

Izgara

Ad: Birinci öğe
Durum: Etkin
Oluşturulma tarihi: 28 Ekim 2026
Açıklama: Kısa bir açıklama burada yer alır.

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

const items = [
  { id: 'name', term: 'Ad', details: 'Birinci öğe' },
  { id: 'status', term: 'Durum', details: 'Etkin' },
  { id: 'created', term: 'Oluşturulma tarihi', details: '28 Ekim 2026' },
  { id: 'description', term: 'Açıklama', details: 'Kısa bir açıklama burada yer alır.' },
];

export default function Layouts() {
  return (
    <div className="flex w-full max-w-3xl flex-col gap-4xl">
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Satır içi</h3>
        <DescriptionList layout="inline" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Alt alta</h3>
        <DescriptionList layout="stacked" items={items} dividers />
      </section>
      <section className="flex flex-col gap-md">
        <h3 className="m-0 type-heading-sm text-fg-default">Izgara</h3>
        <DescriptionList layout="grid" columns={2} items={items} dividers />
      </section>
    </div>
  );
}