<wa-details>
Details show a brief summary and expand to show additional content.
<wa-details summary="Toggle Me"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details>
Use the disable attribute to prevent the details from expanding.
<wa-details summary="Disabled" disabled> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details>
Use the expand-icon and collapse-icon slots to change the expand and collapse icons,
respectively. To disable the animation, override the rotate property on the
summary-icon part as shown below.
<wa-details summary="Toggle Me" class="custom-icons"> <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon> <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <style> wa-details.custom-icons::part(summary-icon) { /* Disable the expand/collapse animation */ rotate: none; } </style>
Details are designed to function independently, but you can simulate a group or "accordion" where
only one is shown at a time by listening for the wa-show event.
<div class="details-group-example"> <wa-details summary="First" open> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details summary="Second"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> <wa-details summary="Third"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </wa-details> </div> <script> const container = document.querySelector('.details-group-example'); // Close all other details when one is shown container.addEventListener('wa-show', event => { if (event.target.localName === 'wa-details') { [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details)); } }); </script> <style> .details-group-example wa-details:not(:last-of-type) { margin-bottom: var(--wa-space-2xs); } </style>
| Name | Description |
|---|---|
| (default) | The details' main content. |
summary
|
The details' summary. Alternatively, you can use the summary attribute.
|
expand-icon
|
Optional expand icon to use instead of the default. Works best with <wa-icon>.
|
collapse-icon
|
Optional collapse icon to use instead of the default. Works best with <wa-icon>.
|
| Name | Description | Reflects | |
|---|---|---|---|
openopen
|
Indicates whether or not the details is open. You can toggle this attribute to show and hide the
details, or you can use the
show() and hide() methods and this attribute
will reflect the details' open state.
Type
boolean
Default
false
|
|
|
summarysummary
|
The summary to show in the header. If you need to display HTML, use the
summary slot
instead.
Type
string
|
||
disableddisabled
|
Disables the details so it can't be toggled.
Type
boolean
Default
false
|
|
| Name | Description | Arguments |
|---|---|---|
show() |
Shows the details. | |
hide() |
Hides the details |
| Name | Description |
|---|---|
wa-show |
Emitted when the details opens. |
wa-after-show |
Emitted after the details opens and all animations are complete. |
wa-hide |
Emitted when the details closes. |
wa-after-hide |
Emitted after the details closes and all animations are complete. |
| Name | Description |
|---|---|
--background-color |
The details' background color.
|
--border-color |
The details' border color.
|
--border-radius |
The radius for the details' corners. Expects a single value.
|
--border-style |
The style of the details' borders.
|
--border-width |
The width of the details' borders. Expects a single value.
|
--icon-color |
The color of the details' icon.
|
--spacing |
The amount of space around and between the details' content. Expects a single value.
|
--show-duration |
The show duration to use when applying built-in animation classes.
Default
200ms
|
--hide-duration |
The hide duration to use when applying built-in animation classes.
Default
200ms
|
| Name | Description |
|---|---|
base |
The component's base wrapper. |
header |
The header that wraps both the summary and the expand/collapse icon. |
summary |
The container that wraps the summary. |
summary-icon |
The container that wraps the expand/collapse icons. |
content |
The details content. |
This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/details/details.js';