Ausklappbar

Ein Ausklappbereich ist ein einzelnes <details> — dasselbe Element, aus dem ein Akkordeon gebaut ist, nur ohne dessen Beiwerk. Nimm ihn für ein optionales Detail mitten auf einer Seite; nimm accordion(), wenn es eine ganze Reihe davon gibt.

Er braucht kein Skript, und weil der Inhalt im Dokument bleibt, findet ihn sowohl die Seitensuche des Browsers als auch eine Suchmaschine.

Einfacher Ausklappbereich

Erzeugte Konfiguration zeigen

Alles, was sitelo schreibt, wenn du den Build ohne eigene Konfigurationsdatei startest.

collapsible({ trigger: 'Erzeugte Konfiguration zeigen' },
  text({ variant: 'small' }, 'Alles, was sitelo schreibt, wenn du den Build ohne eigene Konfigurationsdatei startest.'),
)

Standardmäßig offen

Warum es das gibt

Weil eine Seite, die ihre Erklärung hinter einem Klick versteckt, eine Seite ist, die niemand liest.

collapsible({ trigger: 'Warum es das gibt', open: true },
  text({ variant: 'small' }, 'Weil eine Seite, die ihre Erklärung hinter einem Klick versteckt, eine Seite ist, die niemand liest.'),
)

Reicher Inhalt

Vollständige Ausgabe zeigen
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Vollständige Ausgabe zeigen' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

In anderen Dingen

Ein Ausklappbereich sitzt problemlos in einer Karte, einem Hinweis oder einer Tabellenzelle.

Build fehlgeschlagen

2 kaputte Links

Fehlerhafte Links zeigen
  • /docs/old-routing
    verlinkt von /docs
  • /blog/draft
    verlinkt von /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Build fehlgeschlagen', subtitle: '2 kaputte Links' }),
    cardBody(
      collapsible({ trigger: 'Fehlerhafte Links zeigen' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'verlinkt von /docs' }),
          listItem({ title: '/blog/draft', description: 'verlinkt von /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Langsame Seite' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Eine Seite brauchte über 500 ms zum Rendern.'),
      collapsible({ trigger: 'Zeiten zeigen' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

Der Auslöser

Bleib bei Text und Icons. Ein <summary> ist bereits interaktiv, ein Button oder ein Link darin schachtelt also zwei Bedienelemente ineinander, wo es nur eine Aktion gibt — dieselbe Regel, der menu() folgt.

Ausklappbar oder Akkordeon?

Eine einzelne Offenlegung für sich: collapsible(). Eine Reihe davon, umrahmt und gruppiert, wahlweise mit immer nur einer offenen: accordion().

Props

PropTypStandardBeschreibung
triggerChild—Der Inhalt der Zusammenfassung. Nur Text und Icons.
openbooleanfalseOb er ausgeklappt startet.