Quaff

QExpansionItem

Expansion items reveal supporting content beneath a summary in a list. Group related items by name so opening one closes the others.

Repair notes

Jacket pocket
Loose seam

Match the thread and reinforce the loose corner.

info QExpansionItem API Source
interface QExpansionItemProps extends HTMLAttributes<HTMLDivElement>
caption
?: string = undefined
The caption, displayed below the label in the header.
defaultOpened
?: boolean = false
Whether the expansion item is initially expanded.
dense
?: boolean = false
Use the dense style for the expansion item, reducing its height.
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
duration
?: number = undefined
Duration for the expansion animation in milliseconds. Defaults to 300ms, or 350ms inside an expressive list.
expandIcon
?: MaterialSymbol = "keyboard_arrow_down"
The icon to use as the toggle icon for the expansion item. If not provided, a chevron icon will be used.
expandIconToggle
?: boolean = false
Makes the toggle icon the trigger for the expansion item instead of the whole header. Linked items always use a separate toggle so the link and disclosure remain sibling actions.
expandedIcon
?: MaterialSymbol = undefined
The icon to use as the collapse icon for the expanded item. If not provided, the expandIcon will be rotated 180 degrees when the item is expanded.
hideExpandIcon
?: boolean = false
Hides the decorative expand icon when the whole header is the trigger. A separate or linked disclosure control remains visible so the panel stays operable.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
?: MaterialSymbol = undefined
The icon to display in the header of the expansion item.
label
?: string = undefined
The text to be displayed in the component. When applicable, will overwrite the children snippet content.
name
?: string = undefined
Register the expansion item into a group, closing other items in the group when this one is opened. Groups are scoped to the containing QList.
noRipple
?: boolean = false
Disables the ripple effect on the expansion item. This is useful when the item is used as a link and you want to prevent the ripple effect.
noRotateExpandIcon
?: boolean = false
Prevents the rotation of the expand icon when the item is expanded. This is useful when using a custom icon that does not need to be rotated.
onExpandIconClick
?: MouseEventHandler<HTMLElement> = undefined
Event triggered when the expansion icon is clicked.
onclick
?: MouseEventHandler<HTMLElement> = undefined
Event triggered when the expansion item is clicked.
onkeydown
?: KeyboardEventHandler<HTMLElement> = undefined
Event triggered when a key is pressed on the expansion item header.
replace
?: boolean = false
Replaces the current entry in the browser's history rather than adding a new one. This is the same as setting the `data-sveltekit-replacestate` attribute to "true".
target
?: HTMLAnchorAttributes["target"] = undefined
For navigational components only, sets or retrieves the window or frame at which to target content.
to
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to. As it is the same as href, it is recommended to use href instead.
toggleAriaLabel
?: string = undefined
Overrides the accessible label of a separate expand/collapse button. By default, a state-aware label is generated from the item label.
value
?: boolean = $bindable(defaultOpened)
The bound value of the component.

Usage

Basic Disclosure
Place expansion items inside QList. The whole header opens the panel by default. Add an icon and caption, start open with defaultOpened, or make a row unavailable with disabled.
Disable ripple
Jacket pocket
Loose seam

Match the thread and reinforce the loose corner.

Exclusive Groups
Items with the same name close one another when opened. Groups are scoped to their containing QList: these two lists share a name but expand independently. Remove the name to allow multiple open panels.
Exclusive groups

Repairs

Jacket pocket

Match the thread and reinforce the loose corner.

Materials

Thread

Choose a matching colour and medium-weight thread.

Appearance and Icons
The containing list supplies expressive styling, segmentation and density. Change the disclosure icon or its motion independently. duration is in milliseconds; the default is 300 in standard lists and 350 in expressive lists.
Expressive
Segmented
Dense

A single expandIcon rotates when open. Pair it with expandedIcon to swap glyphs, or use noRotateExpandIcon to keep it still. hideExpandIcon hides only the decoration; the whole header remains operable.

Controlled State and Methods
Bind value to application state, or use bind:this to call show(), hide() and toggle(). ontoggle reports the resulting state for header, binding and method changes. Collapsing the panel preserves its controls' state.
Panel open

No state changes yet. Checkbox: unchecked.

Custom Summary
The summary snippet receives expanded and the show, hide and toggle helpers. Compose its layout with QItemSection. Keep the summary non-interactive: the component supplies the disclosure action.
Accessibility

Enter and Space toggle a focused whole-row header. Tab enters the list; arrow keys move through its rows and separate actions. Use preserveTabOrder on the list if every header should be a Tab stop. Collapsed panels keep their state, but their content is hidden from assistive technology and keyboard navigation.

Keep selection off a list of expansion items: these are disclosures, not listbox options. See QList for keyboard and layout options.

Privacy Policy