sp-accordion-item
Attributes and Properties #
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
autofocus | autofocus | boolean | false | When this control is rendered, focus it automatically |
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
disabled | disabled | boolean | false | Disable this control. It will not receive focus or events |
label | label | string | '' | |
open | open | boolean | false | |
tabIndex | tabIndex | number | | The tab index to apply to this control. See general documentation about the tabindex HTML property |
Slots #
| Name | Description |
|---|---|
default slot | The content of the item that is hidden when the item is not open |
Events #
| Name | Type | Description |
|---|---|---|
sp-accordion-item-toggle | CustomEvent | Announce that an accordion item has been toggled while allowing the event to be cancelled. |
Description #
The <sp-accordion-item> element represents a single item in an <sp-accordion> parent element. Its label attribute and default slot content make up the "headline" and "body" of the toggleable content item.
Usage #
yarn add @spectrum-web-components/accordion
Import the side effectful registration of <sp-accordion-item> via:
import '@spectrum-web-components/accordion/sp-accordion-item.js';
When looking to leverage the AccordionItem base class as a type and/or for extension purposes, do so via:
import { AccordionItem } from '@spectrum-web-components/accordion';
Example #
<sp-accordion>
<sp-accordion-item label="Heading 1">
<div>The content can be toggled visible.</div>
</sp-accordion-item>
</sp-accordion>
Opened #
<sp-accordion allow-multiple>
<sp-accordion-item open label="Heading 2">
<div>This content is visible by default.</div>
</sp-accordion-item>
</sp-accordion>
Disabled #
<sp-accordion allow-multiple>
<sp-accordion-item disabled label="Heading 2">
<div>You can not toggle this content visible.</div>
</sp-accordion-item>
</sp-accordion>
Events #
An <sp-accordion-item> element will dispatch sp-accordion-item-toggle events when it is opened or closed. By default, these events are dispatched to allow the parent <sp-accordion> to manage which of its item children can shot their children at any one time, consumers can also listen for this event and leverage event.target.open to ascertain the current state of the item dispatching item.