DescriptionList

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

DescriptionList.tsx

Storybook

DescriptionList · Playground

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

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

<DescriptionList
  items={[
    { id: 'name', term: 'Ad', details: 'Birinci öğe' },
    { id: 'status', term: 'Durum', details: 'Etkin' },
  ]}
/>;

Parça prop tipleri de dışa açılır: DescriptionListItemProps, DescriptionListTermProps, DescriptionListDetailsProps, DescriptionListActionProps.

Özellikler

items

Açıklama

Gösterilecek satırlar: { id?, term, details, action? }. Özel satırlar için children kullanın. İkisi birlikte verilirse items geçerlidir.

Tür

readonly DescriptionListItem[]

layout

Açıklama

Terim ve değerin dizilişi: inline 1024 px'ten itibaren terimi değerin soluna koyar, altında alt alta dizer; stacked terimi her zaman üste koyar; grid satırları sütunlara dizer.

Tür

Layout

Varsayılan

'inline'

columns

Açıklama

1024 px'ten itibaren sütun sayısı; daha dar ekranda tek sütun. Yalnızca grid yerleşimi için.

Tür

Columns

Varsayılan

2

dividers

Açıklama

Satırlar arasına 1 px çizgi çizer.

Tür

boolean

Varsayılan

false

size

Açıklama

Metin boyutu ve satır boşluğu: sm 12 px metin ve 4 px satır iç boşluğu, md 14 px metin ve 6 px satır iç boşluğu.

Tür

Size

Varsayılan

'md'

emptyLabel

Açıklama

Değer boşken çizginin yanında okunan gerekçe. Varsayılan: "bilgi yok" ya da "no information".

Tür

string

className

Açıklama

Yalnızca yerleşim için: kenar boşluğu, genişlik ve ızgara konumu. Renk ya da boyut değiştirmek için kullanmayın.

Tür

string

children

Açıklama

DescriptionList.Item ile kurulan özel satırlar. items verilirse yok sayılır.

Tür

ReactNode

Bunların dışında yerel öznitelikler (id, aria-*) kök <dl> öğesine iletilir. Bir satır { id?, term, details, action? } biçimindedir.

Parçalar

Yaygın durum için items, özel satırlar için parçaları kullanın. items verilirse children yok sayılır.

Parça	Öğe	Özellikler
DescriptionList.Item	<div>	Yerel öznitelikler. Terimi, değeri ve işlemi sarar.
DescriptionList.Term	<dt>	Yerel öznitelikler.
DescriptionList.Details	<dd>	Yerel öznitelikler. Boş içerik çizgi ve gizli gerekçe olur.
DescriptionList.Action	<dd>	Yerel öznitelikler. Satır sonunda durur.

Veri öznitelikleri

• data-component="description-list", data-layout, data-size, data-dividers: kök öğede.
• data-part: item, term, details, action.

Parçalarla kullanım

<DescriptionList layout="stacked">
  <DescriptionList.Item>
    <DescriptionList.Term>Kimlik</DescriptionList.Term>
    <DescriptionList.Details>ITEM-1024</DescriptionList.Details>
    <DescriptionList.Action>
      <Button size="sm" variant="tertiary">Kopyala</Button>
    </DescriptionList.Action>
  </DescriptionList.Item>
</DescriptionList>