Expansion Item

The QExpansionItem component allows the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on. It’s also known as a collapsible.

They are basically QItem components wrapped with additional functionality. So they can be included in QLists and inherit QItem component properties.

Installation

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

Usage

Basic

Basic

Controlling expansion state

Controlling expansion state

Style

Dense
On a dark background

Options

Switch toggle side
Header slot
Handling events

When dealing with inset levels, a general rule of thumb is that header-inset-level adds left padding to header while it doesn’t do anything with the content, while content-inset-level adds left padding to the content.

Playing with inset levels

Behavior

TIP

The behavior below of toggling by expand icon only is especially useful when having a route attached to the header of QExpansionItem. This way by clicking header it will activate the route and by clicking the expand icon it will, well, expand the content. You can’t have both actions attached to the whole header, obviously.

Toggle by expand icon only
Accordion mode
Popup mode

QExpansionItem API

Loading API...
Please wait...