Lista

Una lista es una superficie con borde hecha de filas. Cada fila tiene un título, una descripción opcional y huecos al principio y al final para un avatar, un icono o un control.

Lista básica

  • Rutas
    src/about.ht.js pasa a ser /about
  • Carga de datos
    data() se ejecuta una vez, en la compilación
  • Recursos
    Solo se empaqueta lo que tu HTML referencia
list(
  listItem({ title: 'Rutas', description: 'src/about.ht.js pasa a ser /about' }),
  listItem({ title: 'Carga de datos', description: 'data() se ejecuta una vez, en la compilación' }),
  listItem({ title: 'Recursos', description: 'Solo se empaqueta lo que tu HTML referencia' }),
)

Huecos inicial y final

  • AL
    Ada Lovelace
    Subió 3 commits a main
    hace 2 h
  • GH
    Grace Hopper
    Abrió una pull request
    abierta
list(
  listItem({
    start: avatar({ name: 'Ada Lovelace', size: 'sm' }),
    title: 'Ada Lovelace',
    description: 'Subió 3 commits a main',
    end: chip({ size: 'sm', color: 'neutral' }, 'hace 2 h'),
  }),
  listItem({
    start: avatar({ name: 'Grace Hopper', size: 'sm', color: 'success' }),
    title: 'Grace Hopper',
    description: 'Abrió una pull request',
    end: chip({ size: 'sm', color: 'success', dot: true }, 'abierta'),
  }),
)

Filas que enlazan

Una fila con href pone el ancla dentro del <li> y no alrededor, así que la lista sigue siendo una lista válida. No pongas además un botón en la fila: el contenido interactivo no puede anidarse dentro de un enlace.

list(
  listItem({ title: 'Primeros pasos', description: 'Instalación y primera página', href: '/es/docs' }),
  listItem({ title: 'Rutas', description: 'Basadas en archivos, con segmentos dinámicos', href: '/es/docs/routing' }),
  listItem({ title: 'Despliegue', description: 'Netlify, Vercel, Pages, Amplify', href: '/es/docs/deployment' }),
)

Filas con controles

Cuando una fila lleva un interruptor o un botón, deja la fila sin enlazar y que sea el control la parte interactiva.

  • Búsqueda con Pagefind
    Indexa todas las páginas al final de la compilación
  • Optimización de imágenes
    Redimensiona y convierte imágenes. Necesita sharp.
  • Islas de servidor
    Renderiza las regiones marcadas al servir la petición
list(
  listItem({
    title: 'Búsqueda con Pagefind',
    description: 'Indexa todas las páginas al final de la compilación',
    end: toggle({ 'aria-label': 'Búsqueda con Pagefind', checked: true }),
  }),
  listItem({
    title: 'Optimización de imágenes',
    description: 'Redimensiona y convierte imágenes. Necesita sharp.',
    end: toggle({ 'aria-label': 'Optimización de imágenes', checked: true }),
  }),
  listItem({
    title: 'Islas de servidor',
    description: 'Renderiza las regiones marcadas al servir la petición',
    end: toggle({ 'aria-label': 'Islas de servidor' }),
  }),
)

Sin adornos

plain quita el borde y el fondo, para una lista que va dentro de una tarjeta o de una barra lateral que ya tiene su propia superficie.

Compilaciones recientes

  • 94a837a
    main · hace 4 minutos
    correcta
  • dcfaaae
    main · hace 2 horas
    correcta
  • a46a461
    main · ayer
    fallida
card(
  cardHeader({ title: 'Compilaciones recientes' }),
  cardBody(
    list({ plain: true },
      listItem({ title: '94a837a', description: 'main · hace 4 minutos', end: chip({ size: 'sm', color: 'success', dot: true }, 'correcta') }),
      listItem({ title: 'dcfaaae', description: 'main · hace 2 horas', end: chip({ size: 'sm', color: 'success', dot: true }, 'correcta') }),
      listItem({ title: 'a46a461', description: 'main · ayer', end: chip({ size: 'sm', color: 'danger', dot: true }, 'fallida') }),
    ),
  ),
)

Filas libres

Sin title ni description, una fila dibuja los hijos que le des — para una maquetación que la forma de dos líneas no cubre.

  • Fila a medida

    Lo que quieras ahí dentro
list(
  listItem(
    stack({ direction: 'row', gap: 'md', align: 'center', justify: 'space-between', style: 'width: 100%' },
      stack({ gap: 'none' },
        text({ variant: 'small' }, 'Fila a medida'),
        text({ variant: 'caption', tone: 'muted' }, 'Lo que quieras ahí dentro'),
      ),
      button({ size: 'sm', variant: 'soft' }, 'Acción'),
    ),
  ),
)

Desde datos

  • E
    English
    24 páginas
    en
  • E
    Español
    24 páginas
    es
  • Z
    简体中文
    24 páginas
    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 + ' páginas',
        end: chip({ size: 'sm', color: 'neutral' }, locale.code),
      }),
    ),
  )
})()

Props

list():

PropTipoPor defectoDescripción
plainbooleanfalseQuita el borde y el fondo.
asstring'ul'Elemento que se renderiza, por ejemplo ol.

listItem():

PropTipoPor defectoDescripción
titleChild—La línea principal de la fila.
descriptionChild—Una segunda línea atenuada.
startChild—Hueco inicial: un avatar o un icono.
endChild—Hueco final: un chip, un control, una marca de tiempo.
hrefstring—Convierte la fila en un enlace, con el ancla dentro del li.
interactivebooleanfalseResalte al pasar por encima sin convertirla en enlace.