Elenco

Un elenco è una superficie bordata di righe. Ogni riga ha un titolo, una descrizione facoltativa e delle caselle all’inizio e alla fine per un avatar, un’icona o un controllo.

Elenco di base

  • Routing
    src/about.ht.js diventa /about
  • Caricamento dati
    data() gira una volta sola, in fase di build
  • Risorse
    Finisce nel bundle solo ciò che il tuo HTML referenzia
list(
  listItem({ title: 'Routing', description: 'src/about.ht.js diventa /about' }),
  listItem({ title: 'Caricamento dati', description: 'data() gira una volta sola, in fase di build' }),
  listItem({ title: 'Risorse', description: 'Finisce nel bundle solo ciò che il tuo HTML referenzia' }),
)

Caselle iniziali e finali

  • AL
    Ada Lovelace
    Ha pubblicato 3 commit su main
    2h
  • GH
    Grace Hopper
    Ha aperto una pull request
    aperta
list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'Ha pubblicato 3 commit su main',
    end: chip({ size: 'sm', color: 'neutral' }, '2h'),
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Ha aperto una pull request',
    end: chip({ size: 'sm', color: 'success', dot: true }, 'aperta'),
  }),
)

Righe che portano da qualche parte

Una riga con un href mette l’ancora dentro il <li> invece che attorno, così l’elenco resta un elenco valido. Non metterci anche un pulsante — il contenuto interattivo non può annidarsi dentro un link.

list(
  listItem({ title: 'Primi passi', description: 'Installazione e prima pagina', href: '/docs' }),
  listItem({ title: 'Routing', description: 'Basato sui file, con segmenti dinamici', href: '/docs/routing' }),
  listItem({ title: 'Deploy', description: 'Netlify, Vercel, Pages, Amplify', href: '/docs/deployment' }),
)

Righe con controlli

Quando una riga contiene un interruttore o un pulsante, lascia la riga stessa senza link e fa’ che sia il controllo la parte interattiva.

  • Ricerca Pagefind
    Indicizza ogni pagina alla fine della build
  • Ottimizzazione delle immagini
    Ridimensiona e converte le immagini. Richiede sharp.
  • Island server
    Renderizza le regioni marcate al momento della richiesta
list(
  listItem({
    title: 'Ricerca Pagefind',
    description: 'Indicizza ogni pagina alla fine della build',
    end: toggle({ 'aria-label': 'Ricerca Pagefind', checked: true }),
  }),
  listItem({
    title: 'Ottimizzazione delle immagini',
    description: 'Ridimensiona e converte le immagini. Richiede sharp.',
    end: toggle({ 'aria-label': 'Ottimizzazione delle immagini', checked: true }),
  }),
  listItem({
    title: 'Island server',
    description: 'Renderizza le regioni marcate al momento della richiesta',
    end: toggle({ 'aria-label': 'Island server' }),
  }),
)

Semplice

plain toglie il bordo e lo sfondo, per un elenco che sta dentro una scheda o una barra laterale che ha già una superficie propria.

Build recenti

  • 94a837a
    main · 4 minuti fa
    superata
  • dcfaaae
    main · 2 ore fa
    superata
  • a46a461
    main · ieri
    fallita
card(
  cardHeader({ title: 'Build recenti' }),
  cardBody(
    list({ plain: true },
      listItem({ title: '94a837a', description: 'main · 4 minuti fa', end: chip({ size: 'sm', color: 'success', dot: true }, 'superata') }),
      listItem({ title: 'dcfaaae', description: 'main · 2 ore fa', end: chip({ size: 'sm', color: 'success', dot: true }, 'superata') }),
      listItem({ title: 'a46a461', description: 'main · ieri', end: chip({ size: 'sm', color: 'danger', dot: true }, 'fallita') }),
    ),
  ),
)

Righe libere

Senza title né description, una riga renderizza qualunque figlio le venga dato — per una disposizione che la forma a due righe non copre.

  • Riga personalizzata

    Dentro ci metti quello che vuoi
list(
  listItem(
    stack({ direction: 'row', gap: 'md', align: 'center', justify: 'space-between', style: 'width: 100%' },
      stack({ gap: 'none' },
        text({ variant: 'small' }, 'Riga personalizzata'),
        text({ variant: 'caption', tone: 'muted' }, 'Dentro ci metti quello che vuoi'),
      ),
      button({ size: 'sm', variant: 'soft' }, 'Azione'),
    ),
  ),
)

Dai dati

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

Props

list():

PropTipoPredefinitoDescrizione
plainbooleanfalseToglie il bordo e lo sfondo.
asstring'ul'Elemento da renderizzare, per esempio ol.

listItem():

PropTipoPredefinitoDescrizione
titleChild—La riga principale.
descriptionChild—Una seconda riga attenuata.
startChild—Casella iniziale — un avatar o un’icona.
endChild—Casella finale — un chip, un controllo, un orario.
hrefstring—Rende la riga un link, con l’ancora dentro al li.
interactivebooleanfalseEvidenziazione al passaggio del mouse senza farne un link.