Bileşenler

ListItem

Listenin bir satırı: başta görsel, ortada başlık ve alt metin, sonda bilgi ya da işlem.

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

ListItem; başta görsel (leading), başlık, alt metin (subtitle), sonda kısa bilgi (meta) ve işlem ya da rozet (trailing) alanlarından oluşur. Varsayılan satır durağandır: üzerine gelince değişmez ve sekme sırasına girmez. Satırları ListItem.List içine koyun; liste <ul>, satırlar <li> olur.

Kullanıcı 1İkincil metin
Bugün

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

export default function Default() {
  return (
    <ListItem.List className="w-full max-w-md" aria-label="Liste">
      <ListItem
        title="Kullanıcı 1"
        subtitle="İkincil metin"
        meta="Bugün"
        leading={<Avatar name="Kullanıcı 1" decorative />}
      />
    </ListItem.List>
  );
}

Boyutlar

size dikey iç boşluğu belirler: sm 8 px, md 12 px, lg 16 px. lg başlığı da 16 px yapar. Ayırıcı çizgi için listeye divided verin. variant="outline" satırın çevresine kenarlık çizer, variant="muted" satırı renklendirir.

Küçükİkincil metin
Ortaİkincil metin
Büyükİkincil metin

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

export default function Sizes() {
  return (
    <ListItem.List divided className="w-full max-w-md" aria-label="Liste">
      <ListItem size="sm" title="Küçük" subtitle="İkincil metin" leading={<Icon name="settings" tone="subtle" />} />
      <ListItem size="md" title="Orta" subtitle="İkincil metin" leading={<Icon name="settings" tone="subtle" />} />
      <ListItem size="lg" title="Büyük" subtitle="İkincil metin" leading={<Icon name="settings" tone="subtle" />} />
    </ListItem.List>
  );
}

Bağlantı satırları

render ile satırın tamamı tek bir hedef olur: render={<a href="…" />}. Üzerine gelince, basınca ve odakta satır motion.stateLayer ile tonlanır; klavye odağında 2 px halka görünür. selected geçerli sayfayı işaretler: seçili yüzey, başlangıç ucunda 2 px çubuk ve aria-current="true".

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

export default function Links() {
  return (
    <nav aria-label="Hesap" className="w-full max-w-md">
      <ListItem.List>
        <ListItem
          title="Profil"
          leading={<Icon name="user" tone="subtle" />}
          trailing={<Icon name="chevron-right" tone="subtle" />}
          render={<a href="#profile" />}
        />
        <ListItem
          title="Ayarlar"
          subtitle="Hesap ve görünüm"
          leading={<Icon name="settings" tone="subtle" />}
          trailing={<Icon name="chevron-right" tone="subtle" />}
          selected
          render={<a href="#settings" />}
        />
        <ListItem
          title="Bildirimler"
          subtitle="E-posta ve uygulama"
          leading={<Icon name="bell" tone="subtle" />}
          trailing={<Icon name="chevron-right" tone="subtle" />}
          render={<a href="#notifications" />}
        />
      </ListItem.List>
    </nav>
  );
}

Ayrı bir işlem

Satırda düğme gerekiyorsa satırı durağan bırakın ve trailing içine bir Button koyun. Satır tıklanabilir olduğunda trailing içinde bağlantı ya da düğme olmamalı: iç içe etkileşimli öğe geçersizdir. Düğme kendi sekme durağı olur.

Birinci öğeİkincil metin
İkinci öğeİkincil metin
Üçüncü öğeİkincil metin

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

export default function TrailingAction() {
  return (
    <ListItem.List divided className="w-full max-w-md" aria-label="Liste">
      {['Birinci öğe', 'İkinci öğe', 'Üçüncü öğe'].map((title) => (
        <ListItem
          key={title}
          title={title}
          subtitle="İkincil metin"
          leading={<Icon name="file" tone="subtle" />}
          trailing={
            <Button size="sm" variant="tertiary">
              Düzenle
            </Button>
          }
        />
      ))}
    </ListItem.List>
  );
}

Devre dışı

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

AyarlarHesap ve görünüm
BildirimlerE-posta ve uygulama

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

export default function Disabled() {
  return (
    <ListItem.List className="w-full max-w-md" aria-label="Liste">
      <ListItem
        title="Ayarlar"
        subtitle="Hesap ve görünüm"
        leading={<Icon name="settings" />}
        render={<a href="#settings" />}
      />
      <ListItem
        title="Bildirimler"
        subtitle="E-posta ve uygulama"
        leading={<Icon name="bell" />}
        disabled
        render={<a href="#notifications" />}
      />
    </ListItem.List>
  );
}

Açık ve koyu mod

ListItem tüm renklerini yüzey, metin ve kenarlık token’larından alır.

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

export default function Links() {
  return (
    <nav aria-label="Hesap" className="w-full max-w-md">
      <ListItem.List>
        <ListItem
          title="Profil"
          leading={<Icon name="user" tone="subtle" />}
          trailing={<Icon name="chevron-right" tone="subtle" />}
          render={<a href="#profile" />}
        />
        <ListItem
          title="Ayarlar"
          subtitle="Hesap ve görünüm"
          leading={<Icon name="settings" tone="subtle" />}
          trailing={<Icon name="chevron-right" tone="subtle" />}
          selected
          render={<a href="#settings" />}
        />
        <ListItem
          title="Bildirimler"
          subtitle="E-posta ve uygulama"
          leading={<Icon name="bell" tone="subtle" />}
          trailing={<Icon name="chevron-right" tone="subtle" />}
          render={<a href="#notifications" />}
        />
      </ListItem.List>
    </nav>
  );
}