Plegable

Un plegable es un solo <details> — el mismo elemento con el que se construye un acordeón, sin nada de su decoración. Úsalo para un detalle opcional en medio de una página; usa accordion() cuando haya un conjunto de ellos.

No necesita script, y como el contenido se queda en el documento, se encuentra tanto con la búsqueda en la página del navegador como con un buscador.

Plegable básico

Ver la configuración generada

Todo lo que sitelo escribe cuando compilas sin un archivo de configuración propio.

collapsible({ trigger: 'Ver la configuración generada' },
  text({ variant: 'small' }, 'Todo lo que sitelo escribe cuando compilas sin un archivo de configuración propio.'),
)

Abierto por defecto

Por qué existe esto

Porque una página que esconde su explicación tras un clic es una página que nadie lee.

collapsible({ trigger: 'Por qué existe esto', open: true },
  text({ variant: 'small' }, 'Porque una página que esconde su explicación tras un clic es una página que nadie lee.'),
)

Contenido enriquecido

Ver la salida completa
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Ver la salida completa' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Dentro de otras cosas

Un plegable vive tan a gusto dentro de una tarjeta, una alerta o una celda de tabla.

Compilación fallida

2 enlaces rotos

Ver los enlaces que fallan
  • /docs/old-routing
    enlazado desde /docs
  • /blog/draft
    enlazado desde /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Compilación fallida', subtitle: '2 enlaces rotos' }),
    cardBody(
      collapsible({ trigger: 'Ver los enlaces que fallan' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'enlazado desde /docs' }),
          listItem({ title: '/blog/draft', description: 'enlazado desde /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Página lenta' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Una página tardó más de 500 ms en renderizarse.'),
      collapsible({ trigger: 'Ver los tiempos' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

El disparador

Limítalo a texto e iconos. Un <summary> ya es interactivo, así que un botón o un enlace dentro anida dos controles donde solo hay una acción — la misma regla que sigue menu().

¿Plegable o acordeón?

Una sola revelación por su cuenta: collapsible(). Un conjunto de ellas, con borde y agrupadas, opcionalmente con solo una abierta a la vez: accordion().

Props

PropTipoPor defectoDescripción
triggerChild—El contenido del resumen. Solo texto e iconos.
openbooleanfalseSi empieza desplegado.