Comprimibile

Un comprimibile è un singolo <details> — lo stesso elemento con cui è costruita una fisarmonica, senza nulla della sua cornice. Usalo per un dettaglio facoltativo in mezzo a una pagina; usa accordion() quando ce n’è un insieme.

Non ha bisogno di alcuno script, e poiché il contenuto resta nel documento si trova con la funzione “cerca nella pagina” del browser e dai motori di ricerca.

Comprimibile di base

Mostra la configurazione generata

Tutto ciò che sitelo scrive quando esegui la build senza un tuo file di configurazione.

collapsible({ trigger: 'Mostra la configurazione generata' },
  text({ variant: 'small' }, 'Tutto ciò che sitelo scrive quando esegui la build senza un tuo file di configurazione.'),
)

Aperto per impostazione predefinita

Perché esiste

Perché una pagina che nasconde la propria spiegazione dietro un clic è una pagina che nessuno legge.

collapsible({ trigger: 'Perché esiste', open: true },
  text({ variant: 'small' }, 'Perché una pagina che nasconde la propria spiegazione dietro un clic è una pagina che nessuno legge.'),
)

Contenuto ricco

Mostra l’output completo
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Mostra l’output completo' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Dentro altre cose

Un comprimibile sta volentieri dentro una scheda, un avviso o la cella di una tabella.

Build fallita

2 link rotti

Mostra i link che non funzionano
  • /docs/old-routing
    collegato da /docs
  • /blog/draft
    collegato da /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Build fallita', subtitle: '2 link rotti' }),
    cardBody(
      collapsible({ trigger: 'Mostra i link che non funzionano' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'collegato da /docs' }),
          listItem({ title: '/blog/draft', description: 'collegato da /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Pagina lenta' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Una pagina ha impiegato più di 500 ms per essere renderizzata.'),
      collapsible({ trigger: 'Mostra i tempi' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

L’innesco

Tienilo a testo e icone. Un <summary> è già interattivo, quindi un pulsante o un link al suo interno annida due controlli dove c’è una sola azione — la stessa regola che segue menu().

Comprimibile o fisarmonica?

Una sola rivelazione per conto suo: collapsible(). Un insieme, con bordi e raggruppato, eventualmente con uno solo aperto per volta: accordion().

Props

PropTipoPredefinitoDescrizione
triggerChild—Il contenuto del summary. Solo testo e icone.
openbooleanfalseSe parte già espanso.