Live demo — this example is server-driven; run the showcase locally for the interactive version.
Drawer
Use Drawer 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.
Drawer — PatternFly v6. Root of the drawer family; compose drawer-section /
drawer-main (> drawer-content + drawer-panel) includes in the main block.
Optional params:
id — DOM id on the root.
inline — pf-m-inline.
static — pf-m-static (starts expanded).
panelLeft — pf-m-panel-left. panelBottom — pf-m-panel-bottom.
pill — pf-m-pill (detached rounded panel).
startExpanded — start with the panel open (without pf-m-static).
resizable — uses the phaDrawerResizable Alpine factory instead of plain expanded
state; pair with drawer-panel resizable=true for the splitter.
defaultSize / minSize — px numbers for the resizable factory (data-* attributes).
attrs — raw attribute passthrough on the root.
The root owns the `expanded` Alpine state and the bound pf-m-expanded class —
toggles inside the content use @click="expanded = !expanded".
Model mode: pass drawer=<org.sitenetsoft.quarkus.pha.model.Drawer> — generated toggle/panel wiring;
scope-sharing chrome compositions keep the slot shell.
drawer-body
{#include components/data-display/drawer-body /}
Drawer body — repeat for stacked sections (inside drawer-content or drawer-panel).
Optional: padding —
pf-m-padding. noPadding — pf-m-no-padding.
Drawer content — the page-side area; put drawer-body includes inside. Main-block content.
drawer-head
{#include components/data-display/drawer-head /}
Drawer head — title row of the panel; main block is the title content. Renders the close button (wired to the root's
expanded state) unless noClose is set.
Optional: noClose, closeAriaLabel (default "Close drawer panel").
drawer-main
{#include components/data-display/drawer-main /}
Drawer main — wraps drawer-content + drawer-panel. Main-block content.
drawer-panel
{#include components/data-display/drawer-panel /}
Drawer panel — slides in/out with the root's `expanded` state. Main-block content
(drawer-body / drawer-panel-main includes).
Optional params:
resizable — renders the splitter wired to the root's phaDrawerResizable factory
(set resizable=true on the drawer root too); orientation follows the
inherited panelBottom param.
secondary — pf-m-secondary background.
panelWidth — extra width classes, e.g. "pf-m-width-33 pf-m-width-50-on-lg".
attrs — raw attribute passthrough on the panel.