BwDetails | bw-details
Overview
The details component is a container that can be used to show and hide content. Use it to hide content that is not necessary to show all the time. It's name and api are inspired by the native html details element.
This component implements the disclosure pattern.
Usage
Basic
Cool stuff!
<bw-details summary="Show more cool stuff">
<p>Cool stuff!</p>
</bw-details>
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
iconSide | icon-side | The side of the icon to show | "left" | "right" | 'right' |
iconToggle | icon-toggle | Whether to use an icon button to toggle the details content | boolean | false |
open | open | Opens and closes the details content | boolean | undefined |
summary | summary | Summary text that shows above the expandable content. You can override this using the summary slot | string | undefined |
Events
| Event | Description | Type |
|---|---|---|
collapse | Emiits when the details content is closed | CustomEvent<any> |
expand | Emiits when the details content is opened | CustomEvent<any> |
Slots
| Slot | Description |
|---|---|
| The expandable content goes in the default slot | |
"summary" | The summary text that shows above the expandable content |
Shadow Parts
| Part | Description |
|---|---|
"content" | The container that contains the expandable content |
"summary" | The summary element that is rendered when you pass in the summary prop |
"toggle" | The button that toggle the expandable content |
Dependencies
Depends on
Graph
© 2025 United Systems & Software - All Rights Reserved.