sp-accordion-item
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
disabled
disabled
boolean
false
label
label
string
''
open
open
boolean
false
tabIndex
tabIndex
number
Slots #
default slot
Events #
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.