Disclosure
Progressively reveal content: expandable details, grouped accordions, tabs, and trees.
Details
Appearance: outlined
^^^outlined
Outlined summary
>>>
Hidden body for the `outlined` appearance.
^^^
Outlined summary
Hidden body for the outlined appearance.
Appearance: filled
^^^filled
Filled summary
>>>
Hidden body for the `filled` appearance.
^^^
Filled summary
Hidden body for the filled appearance.
Appearance: filled-outlined
^^^filled-outlined
Filled-outlined summary
>>>
Hidden body for the `filled-outlined` appearance.
^^^
Filled-outlined summary
Hidden body for the filled-outlined appearance.
Appearance: plain
^^^plain
Plain summary
>>>
Hidden body for the `plain` appearance.
^^^
Plain summary
Hidden body for the plain appearance.
Open by default
^^^open
Already expanded
>>>
This section starts open on load.
^^^
Already expanded
This section starts open on load.
Icon at start
^^^start
Summary with a leading icon
>>>
The expand icon sits before the label.
^^^
Summary with a leading icon
The expand icon sits before the label.
Custom toggle icons
^^^icon:expand:plus icon:collapse:minus
Click to expand
>>>
Custom plus/minus toggle icons.
^^^
Click to expand
Custom plus/minus toggle icons.
Accordion
Multiple (default)
Several sections can be open at once.
//////
/// What is Web Awesome?
A library of framework-agnostic web components.
///
/// Is it free?
The core library is free and open source.
///
//////
A library of framework-agnostic web components.
The core library is free and open source.
Single
//////filled single
/// First
Opening another closes this one.
///
/// Second
Only one section stays open at a time.
///
//////
Opening another closes this one.
Only one section stays open at a time.
Single-collapsible
//////outlined single-collapsible
/// One
All sections can be closed.
///
/// Two
One open at a time โ or none.
///
//////
All sections can be closed.
One open at a time โ or none.
Tabs
Placement: top
++++++top
+++ Tab one
Content for the first tab (`top` placement).
+++
+++ Tab two
Content for the second tab.
+++
++++++
Content for the first tab (top placement).
Content for the second tab.
Placement: bottom
++++++bottom
+++ Tab one
Content for the first tab (`bottom` placement).
+++
+++ Tab two
Content for the second tab.
+++
++++++
Content for the first tab (bottom placement).
Content for the second tab.
Placement: start
++++++start
+++ Tab one
Content for the first tab (`start` placement).
+++
+++ Tab two
Content for the second tab.
+++
++++++
Content for the first tab (start placement).
Content for the second tab.
Placement: end
++++++end
+++ Tab one
Content for the first tab (`end` placement).
+++
+++ Tab two
Content for the second tab.
+++
++++++
Content for the first tab (end placement).
Content for the second tab.
Manual activation + disabled tab
++++++manual
+++ Available
Switches on click, not hover.
+++
+++ disabled Coming soon
Not yet available.
+++
++++++
Switches on click, not hover.
Not yet available.
Tree
File tree
A nested bullet list becomes a <wa-tree>. open expands the top-level branches.
||||||open
- icon:folder src
- icon:file index.ts
- icon:file utils.ts
- icon:file README.md
||||||
Collapsed
||||||
- icon:folder docs
- icon:file intro.md
- icon:file guide.md
- icon:folder assets
- icon:file logo.svg
||||||