Live demo — this example is server-driven; run the showcase locally for the interactive version.
Accordion
Use Accordion straight from a Qute template — parameters and slots instead of Java builders. This reference is generated
from the runtime template sources: each template documents its parameters and slots in the header comment shown
beneath its include line.
Accordion (root) — PatternFly v6
Compose-by-include: render one components/data-display/accordion-item per item
in the {#items} slot. Each item owns its own Alpine expanded state, so multiple
items expand independently. Single-expand (shared state) is hand-rolled.
Required: id.
Optional: bordered, displayLg, toggleStart (root modifier — also pass
toggleStart to each item so the markup reorders icon/text),
definitionList (renders a <dl>; pass definitionList to each item too),
ariaLabel.
Slot:
{#items} — one or more accordion-item includes. Named "items" (not "content")
to avoid colliding with the example-card partial's "content" slot.
The root id/bordered are shadowed to null around the insert so they
can't leak onto the composed items (which carry their own itemId).
Model mode: pass accordion=<org.sitenetsoft.quarkus.pha.model.Accordion> (built via
Accordion.of(id)) — self-stated items by default, singleExpand() for shared state,
definitionList() for the dl/dt/dd shape.
Accordion item — PatternFly v6
One item in an accordion. Owns its own Alpine "expanded" state (independent,
multi-expand by default) — single-expand needs shared state and stays raw.
Parameters:
itemId (required) — derives the toggle/content ids ({itemId}-toggle /
{itemId}-content) for aria-controls + labelledby.
title (required) — toggle text.
expanded (optional) — start open (default false).
toggleStart (optional) — render the icon before the text (PF "start").
fixed (optional) — cap the content height with overflow scroll.
headingLevel (optional) — h1..h6 wrapping the toggle (default h3); ignored
in definitionList mode (uses dt).
definitionList (optional) — render dt/dd for use inside a dl accordion root.
isCustomContent (optional) — skip the __expandable-content-body wrapper.
Main block: the item's body content.
