Seiten
Inhalt
9. Disclosure / Collapse
xpulse-disclosure ist das Pattern für auf- und zuklappbare Bereiche. Basiert auf nativem <details>/<summary> — kein JavaScript nötig.
Standard-Disclosure
Release Notes (offen)
Ideal für optionale Zusatzinfos, Beispiele oder eingebettete Navigation.
Changelog (geschlossen)
Dieser Inhalt ist standardmäßig eingeklappt.
| <details class="xpulse-disclosure"> |
| <summary class="xpulse-button xpulse-button--ghost xpulse-button--block xpulse-disclosure__summary xpulse-text-left"> |
| Titel |
| </summary> |
| <div class="xpulse-box xpulse-box--content">Inhalt</div> |
| </details> |
Caret rechts (Navigation)
Mit .xpulse-disclosure__summary--caret-right wandert das Pfeil-Icon nach rechts — ideal für Seitenleisten.
| <details class="xpulse-disclosure"> |
| <summary class="xpulse-button xpulse-button--ghost xpulse-button--block |
| xpulse-disclosure__summary xpulse-disclosure__summary--caret-right xpulse-text-left"> |
| Gruppe |
| </summary> |
| <div class="xpulse-nav xpulse-nav--vertical">...</div> |
| </details> |
Float-Dropdown (horizontale Navigation)
Mit .xpulse-disclosure--float und .xpulse-disclosure__summary--float öffnet das Dropdown schwebend — geeignet für horizontale Menüs.
| <details class="xpulse-disclosure xpulse-disclosure--float"> |
| <summary class="xpulse-button xpulse-button--ghost xpulse-disclosure__summary |
| xpulse-disclosure__summary--caret-right xpulse-disclosure__summary--float"> |
| Menüpunkt |
| </summary> |
| <div class="xpulse-nav__children">...</div> |
| </details> |
Als Pill-Toggle (Code-Beispiele)
Code anzeigen
const theme = 'dark';| <details class="xpulse-disclosure"> |
| <summary class="xpulse-pill xpulse-disclosure__summary">Code anzeigen</summary> |
| <pre class="xpulse-code-block"><code>...</code></pre> |
| </details> |