Liste

Liste, kenarlıklı bir satır yüzeyidir. Her satırın bir başlığı, isteğe bağlı bir açıklaması ve başta ile sonda bir avatar, bir simge ya da bir denetim için yuvaları vardır.

Temel liste

Yönlendirme
src/about.ht.js dosyası /about olur
Veri yükleme
data() bir kez, derleme sırasında çalışır
Varlıklar
Yalnızca HTML’inizin başvurduğu şeyler paketlenir

list(
  listItem({ title: 'Yönlendirme', description: 'src/about.ht.js dosyası /about olur' }),
  listItem({ title: 'Veri yükleme', description: 'data() bir kez, derleme sırasında çalışır' }),
  listItem({ title: 'Varlıklar', description: 'Yalnızca HTML’inizin başvurduğu şeyler paketlenir' }),
)

Baş ve son yuvaları

AL
Ada Lovelace
main dalına 3 işleme gönderdi
2sa
GH
Grace Hopper
Bir çekme isteği açtı
açık

list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'main dalına 3 işleme gönderdi',
    end: chip({ size: 'sm', color: 'neutral' }, '2sa'),
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Bir çekme isteği açtı',
    end: chip({ size: 'sm', color: 'success', dot: true }, 'açık'),
  }),
)

Bağlanan satırlar

href taşıyan bir satır, çapayı <li> öğesinin çevresine değil içine koyar, böylece liste geçerli bir liste olarak kalır. Satıra ayrıca bir düğme koymayın — etkileşimli içerik bir bağlantının içine yuvalanamaz.

list(
  listItem({ title: 'Başlarken', description: 'Kurulum ve ilk sayfa', href: '/docs' }),
  listItem({ title: 'Yönlendirme', description: 'Dinamik parçalarla dosya tabanlı', href: '/docs/routing' }),
  listItem({ title: 'Dağıtım', description: 'Netlify, Vercel, Pages, Amplify', href: '/docs/deployment' }),
)

Denetimli satırlar

Bir satır bir anahtar ya da düğme taşıdığında satırın kendisini bağlantısız bırakın ve etkileşimli parça denetim olsun.

Pagefind araması
Derlemenin sonunda her sayfayı dizinler
Görsel optimizasyonu
Görselleri yeniden boyutlandırır ve dönüştürür. sharp gerektirir.
Sunucu adaları
İşaretli bölgeleri istek anında işler

list(
  listItem({
    title: 'Pagefind araması',
    description: 'Derlemenin sonunda her sayfayı dizinler',
    end: toggle({ 'aria-label': 'Pagefind araması', checked: true }),
  }),
  listItem({
    title: 'Görsel optimizasyonu',
    description: 'Görselleri yeniden boyutlandırır ve dönüştürür. sharp gerektirir.',
    end: toggle({ 'aria-label': 'Görsel optimizasyonu', checked: true }),
  }),
  listItem({
    title: 'Sunucu adaları',
    description: 'İşaretli bölgeleri istek anında işler',
    end: toggle({ 'aria-label': 'Sunucu adaları' }),
  }),
)

Düz

plain kenarlığı ve zemini kaldırır; zaten kendi yüzeyi olan bir kartın ya da kenar çubuğunun içinde duran bir liste için.

Son derlemeler

94a837a
main · 4 dakika önce
geçti
dcfaaae
main · 2 saat önce
geçti
a46a461
main · dün
başarısız

card(
  cardHeader({ title: 'Son derlemeler' }),
  cardBody(
    list({ plain: true },
      listItem({ title: '94a837a', description: 'main · 4 dakika önce', end: chip({ size: 'sm', color: 'success', dot: true }, 'geçti') }),
      listItem({ title: 'dcfaaae', description: 'main · 2 saat önce', end: chip({ size: 'sm', color: 'success', dot: true }, 'geçti') }),
      listItem({ title: 'a46a461', description: 'main · dün', end: chip({ size: 'sm', color: 'danger', dot: true }, 'başarısız') }),
    ),
  ),
)

Serbest biçimli satırlar

title ya da description olmadan bir satır, kendisine verilen çocukları işler — iki satırlık biçimin karşılamadığı bir yerleşim için.

Özel satır
İçine istediğiniz her şey

list(
  listItem(
    stack({ direction: 'row', gap: 'md', align: 'center', justify: 'space-between', style: 'width: 100%' },
      stack({ gap: 'none' },
        text({ variant: 'small' }, 'Özel satır'),
        text({ variant: 'caption', tone: 'muted' }, 'İçine istediğiniz her şey'),
      ),
      button({ size: 'sm', variant: 'soft' }, 'Eylem'),
    ),
  ),
)

Veriden

E
English
24 sayfa
en
E
Español
24 sayfa
es
Z
简体中文
24 sayfa
zh

return (() => {
  const locales = [
    { code: 'en', name: 'English', pages: 24 },
    { code: 'es', name: 'Español', pages: 24 },
    { code: 'zh', name: '简体中文', pages: 24 },
  ]

  return list(
    locales.map((locale) =>
      listItem({
        start: avatar({ name: locale.code, size: 'sm', color: 'neutral', square: true }),
        title: locale.name,
        description: locale.pages + ' sayfa',
        end: chip({ size: 'sm', color: 'neutral' }, locale.code),
      }),
    ),
  )
})()

Proplar

list():

Prop	Tür	Varsayılan	Açıklama
`plain`	`boolean`	`false`	Kenarlığı ve zemini kaldırır.
`as`	`string`	`'ul'`	İşlenecek öğe, örneğin ol.

listItem():

Prop	Tür	Varsayılan	Açıklama
`title`	`Child`	—	Satırın ana satırı.
`description`	`Child`	—	Soluk bir ikinci satır.
`start`	`Child`	—	Baştaki yuva — bir avatar ya da simge.
`end`	`Child`	—	Sondaki yuva — bir etiket, bir denetim, bir zaman damgası.
`href`	`string`	—	Çapa li içinde olacak biçimde satırı bağlantı yapar.
`interactive`	`boolean`	`false`	Bağlantı yapmadan üzerine gelme vurgusu.