ListItem

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

ListItem.tsx

Storybook

ListItem · Playground

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

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

<ListItem.List divided aria-label="Ayarlar">
  <ListItem title="Ayarlar" subtitle="Hesap ve görünüm" meta="Bugün" />
  <ListItem title="Bildirimler" render={<a href="/bildirimler" />} />
</ListItem.List>;

Parça prop tipleri de dışa açılır: ListItemLeadingProps, ListItemContentProps, ListItemTitleProps, ListItemSubtitleProps, ListItemMetaProps, ListItemTrailingProps, ListItemListProps.

Özellikler

title

Açıklama

Ana metin. Parçaları children ile kendiniz dizmiyorsanız zorunludur.

Tür

ReactNode

subtitle

Açıklama

Başlığın altında ikinci, daha küçük bir satır.

Tür

ReactNode

meta

Açıklama

Satır sonunda tarih ya da sayı gibi kısa bilgi. Tek satırda kalır.

Tür

ReactNode

leading

Açıklama

En başta ne olduğu: Avatar, Icon ya da küçük resim. Başlık kişiyi zaten adlandırıyorsa Avatar'ı decorative yapın.

Tür

ReactNode

trailing

Açıklama

En sonda ne olduğu. render ile etkileşimli yapılmış satırda bağlantı ya da düğme içermemelidir; bunun için durağan satır kullanın.

Tür

ReactNode

size

Açıklama

8, 12 ya da 16 px dikey iç boşluk (sm, md, lg); lg ayrıca daha büyük başlık kullanır.

Tür

Size

Varsayılan

'md'

variant

Açıklama

outline satırın çevresine 1 px kenarlık çizer, muted satıra renkli bir yüzey verir; default ikisini de taşımaz.

Tür

'default' | 'outline' | 'muted'

Varsayılan

'default'

selected

Açıklama

Geçerli satırı işaretler: seçili yüzey ve başlangıç ucunda çubuk; etkileşimli satırda ayrıca aria-current="true". Gezinti için kullanın, açma-kapama için değil.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Satırı soluklaştırır. Etkileşimli satır ayrıca sekme sırasından çıkar ve tıklamayı yok sayar (aria-disabled).

Tür

boolean

Varsayılan

false

truncate

Açıklama

Başlık ve alt metni tek satırda tutar, taşanı üç nokta ile keser. Varsayılan olarak başlık bir, alt metin iki satır gösterilir, sonra üç nokta gelir.

Tür

boolean

Varsayılan

false

render

Açıklama

Satırı tek bir etkileşimli hedef yapar: <a href="…" />, <button type="button" /> ya da yönlendirici bağlantısı. Verilmezse satır durağandır.

Tür

ReactElement | ComponentRenderFn<HTMLProps, {}>

className

Açıklama

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

Tür

string

children

Açıklama

Satır parçaları: ListItem.Leading, ListItem.Content, ListItem.Meta, ListItem.Trailing. Verilirse title, subtitle, meta, leading ve trailing çizilmez.

Tür

ReactNode

Bunların dışında yerel öznitelikler (id, data-*) kök <li> öğesine iletilir. aria-current ve data-selected gibi durumlar satırda ayarlanır.

Parçalar

Parça	Öğe	Özellikler
ListItem.List	<ul>	divided, animate, className ve yerel ul öznitelikleri. role="list" ile gelir.
ListItem.Leading	<div>	Yerel öznitelikler. Başlangıç alanı.
ListItem.Content	<div>	Yerel öznitelikler. Boş genişliği alır; başlık ve alt metni dizer.
ListItem.Title	<span>	Yerel öznitelikler. truncate kökten gelir.
ListItem.Subtitle	<span>	Yerel öznitelikler.
ListItem.Meta	<span>	Yerel öznitelikler. Tek satır.
ListItem.Trailing	<div>	Yerel öznitelikler. Son alan.

children verirseniz title, subtitle, meta, leading ve trailing çizilmez; parçaları siz dizersiniz.

Veri öznitelikleri

• data-component="list-item", data-size, data-selected, data-disabled, data-interactive: kök <li> öğesinde. data-selected ve data-disabled satırda da bulunur.
• data-part: row, leading, content, title, subtitle, meta, trailing. Liste data-component="list" taşır.

Yönlendirici bağlantısı

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

<ListItem title="Ayarlar" selected render={<Link to="/ayarlar" />} />;

Ayrı işlem

<ListItem
  title="Birinci öğe"
  trailing={
    <Button size="sm" variant="tertiary">
      Düzenle
    </Button>
  }
/>