sp-accordion-item

open true false
allowMultiple true false
density Compact Spacious Default
size Small Medium Large Extra large

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description 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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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.