Lista

Lista to obramowana powierzchnia z wierszami. Każdy wiersz ma tytuł, opcjonalny opis i miejsca na początku i na końcu na awatar, ikonę albo kontrolkę.

Podstawowa lista

  • Routing
    src/about.ht.js staje się /about
  • Wczytywanie danych
    data() działa raz, podczas buildu
  • Zasoby
    Do paczki trafia tylko to, do czego odwołuje się Twój HTML
list(
  listItem({ title: 'Routing', description: 'src/about.ht.js staje się /about' }),
  listItem({ title: 'Wczytywanie danych', description: 'data() działa raz, podczas buildu' }),
  listItem({ title: 'Zasoby', description: 'Do paczki trafia tylko to, do czego odwołuje się Twój HTML' }),
)

Miejsca na początku i na końcu

  • AL
    Ada Lovelace
    Wypchnęła 3 commity na main
    2h
  • GH
    Grace Hopper
    Otworzyła pull request
    otwarty
list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'Wypchnęła 3 commity na main',
    end: chip({ size: 'sm', color: 'neutral' }, '2h'),
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Otworzyła pull request',
    end: chip({ size: 'sm', color: 'success', dot: true }, 'otwarty'),
  }),
)

Wiersze, które prowadzą dalej

Wiersz z href umieszcza kotwicę wewnątrz <li>, a nie wokół niego, więc lista pozostaje poprawną listą. Nie wkładaj w taki wiersz także przycisku — treść interaktywna nie może zagnieżdżać się w odnośniku.

list(
  listItem({ title: 'Pierwsze kroki', description: 'Instalacja i pierwsza strona', href: '/docs' }),
  listItem({ title: 'Routing', description: 'Oparty na plikach, z segmentami dynamicznymi', href: '/docs/routing' }),
  listItem({ title: 'Wdrożenie', description: 'Netlify, Vercel, Pages, Amplify', href: '/docs/deployment' }),
)

Wiersze z kontrolkami

Gdy wiersz zawiera przełącznik albo przycisk, zostaw sam wiersz bez odnośnika i pozwól, by to kontrolka była częścią interaktywną.

  • Wyszukiwanie Pagefind
    Indeksuje każdą stronę na końcu buildu
  • Optymalizacja obrazów
    Skaluje i konwertuje obrazy. Wymaga sharpa.
  • Wyspy serwerowe
    Renderuje oznaczone obszary w chwili żądania
list(
  listItem({
    title: 'Wyszukiwanie Pagefind',
    description: 'Indeksuje każdą stronę na końcu buildu',
    end: toggle({ 'aria-label': 'Wyszukiwanie Pagefind', checked: true }),
  }),
  listItem({
    title: 'Optymalizacja obrazów',
    description: 'Skaluje i konwertuje obrazy. Wymaga sharpa.',
    end: toggle({ 'aria-label': 'Optymalizacja obrazów', checked: true }),
  }),
  listItem({
    title: 'Wyspy serwerowe',
    description: 'Renderuje oznaczone obszary w chwili żądania',
    end: toggle({ 'aria-label': 'Wyspy serwerowe' }),
  }),
)

Prosta

plain zdejmuje obramowanie i tło, dla listy siedzącej w karcie albo w panelu bocznym, który ma już własną powierzchnię.

Ostatnie buildy

  • 94a837a
    main · 4 minuty temu
    zaliczony
  • dcfaaae
    main · 2 godziny temu
    zaliczony
  • a46a461
    main · wczoraj
    nieudany
card(
  cardHeader({ title: 'Ostatnie buildy' }),
  cardBody(
    list({ plain: true },
      listItem({ title: '94a837a', description: 'main · 4 minuty temu', end: chip({ size: 'sm', color: 'success', dot: true }, 'zaliczony') }),
      listItem({ title: 'dcfaaae', description: 'main · 2 godziny temu', end: chip({ size: 'sm', color: 'success', dot: true }, 'zaliczony') }),
      listItem({ title: 'a46a461', description: 'main · wczoraj', end: chip({ size: 'sm', color: 'danger', dot: true }, 'nieudany') }),
    ),
  ),
)

Dowolne wiersze

Bez title i description wiersz renderuje dowolne dzieci, które dostanie — na układ, którego kształt dwuwierszowy nie obejmuje.

  • Własny wiersz

    W środku cokolwiek zechcesz
list(
  listItem(
    stack({ direction: 'row', gap: 'md', align: 'center', justify: 'space-between', style: 'width: 100%' },
      stack({ gap: 'none' },
        text({ variant: 'small' }, 'Własny wiersz'),
        text({ variant: 'caption', tone: 'muted' }, 'W środku cokolwiek zechcesz'),
      ),
      button({ size: 'sm', variant: 'soft' }, 'Akcja'),
    ),
  ),
)

Z danych

  • P
    Polski
    24 stron
    pl
  • E
    Español
    24 stron
    es
  • Z
    简体中文
    24 stron
    zh
return (() => {
  const locales = [
    { code: 'pl', name: 'Polski', 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 + ' stron',
        end: chip({ size: 'sm', color: 'neutral' }, locale.code),
      }),
    ),
  )
})()

Propsy

list():

PropTypDomyślnieOpis
plainbooleanfalseZdejmuje obramowanie i tło.
asstring'ul'Element do wyrenderowania, np. ol.

listItem():

PropTypDomyślnieOpis
titleChild—Główny wiersz.
descriptionChild—Przygaszony drugi wiersz.
startChild—Miejsce z przodu — awatar albo ikona.
endChild—Miejsce z tyłu — żeton, kontrolka, godzina.
hrefstring—Czyni wiersz odnośnikiem, z kotwicą wewnątrz li.
interactivebooleanfalsePodświetlenie po najechaniu bez czynienia z niego odnośnika.