Accordion
<wa-accordion>
Provides a wrapper for the details component to implement an accordion-like behavior, allowing only a single section to be open at any given time.
Second
1
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-accordion> <wa-details open> <div slot="summary" class="wa-flank"> <wa-icon name="plus"></wa-icon> <span>First</span> </div> 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> <div slot="summary" class=wa-split:row"> <span>Second</span> <wa-badge variant="brand" attention="bounce" pill>1</wa-badge> </div> 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 class="change_icon" 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-icon slot="expand-icon" name="angles-right"></wa-icon> <wa-icon slot="collapse-icon" name="angles-right"></wa-icon> </wa-details> </wa-accordion>
Slots Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The default slot. |
CSS custom properties Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--details-gap |
The Gap between the details.
|
CSS parts Jump to heading
Learn more about CSS parts.
| Name | Description |
|---|---|
base |
The component's base wrapper. |
Importing Jump to heading
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-beta.4/dist/components/accordion/accordion.js';
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/accordion/accordion.js';
To manually import this component from React, use the following code.
import WaAccordion from '@awesome.me/webawesome/dist/react/accordion';
Need a hand?