Components-ExpansionPannels¶
Expansion panels contain creation flows and allow lightweight editing of an element.
They may be used for a variety of tasks, such as:
- To edit a setting.
- To create a tool for ad campaigns.
Usage¶
An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.
Editing :¶
Expansion panels are best used for lightweight editing of an element, such as selecting a value for a setting. For example, an app that contains tables may use expansion panels to adjust settings on table elements.
Creation flows :¶
Expansion panels may be displayed in a sequence to form creation flows. For example, a tool for creating ad campaigns may display a series of expansion panels to collect campaign details.
Behavior¶
Collapsed panel¶
A collapsed panel displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel.
Expanded panel¶
Upon selection, a collapsed panel expands, allowing users to add or edit information. Helper text may be added to the panel to assist the user.
Focus state¶
An expansion panel may use a focus state (by using a grey background on the list item) to provide focus to individual list items.
On a keyboard, users may traverse through list items by using the Tab key.
Specs¶
For specs click here.