PropertyAttributeDescriptionTypeDefaultcompact compactDisplays the Accordion as compact version with thinner border and smaller paddings.booleanundefinedheading headingDefines the heading used in accordion.stringundefinedheadingTag heading-tagSets a heading tag, so it fits correctly within the outline of the page.type AccordionHeadingTag = 'h1' 'h2' 'h3' 'h4' 'h5' 'h6''h2'open openDefines if accordion is open.booleanundefinedsize 🛠sizeThe text size.type AccordionSize = 'small' 'medium' BreakpointCustomizable<AccordionSize>'small'sticky 🧪stickyexperimental Sticks the Accordion heading at the top, fixed while scrollingbooleanundefinedtag 🚫tagdeprecated, will be removed with next major release, use heading-tag instead. Sets a heading tag, so it fits correctly within the outline of the page.type AccordionTag = undefined 'h1' 'h2' 'h3' 'h4' 'h5' 'h6'undefinedtheme themeAdapts the color when used on dark background.type Theme = 'light' 'dark' 'auto''light'
Events
prev
next
EventDescriptionTypeaccordionChange 🚫deprecated since v3.0.0, will be removed with next major release, use update event instead. Emitted when accordion state is changed.type AccordionUpdateEventDetail = { open: boolean; } CustomEvent<AccordionUpdateEventDetail>update Emitted when accordion state is changed.type AccordionUpdateEventDetail = { open: boolean; } CustomEvent<AccordionUpdateEventDetail>
Slots
prev
next
SlotDescriptionisRequiredaltPropallowedTagNames<slot name="heading"> Defines the heading used in the accordion. Can be used alternatively to the heading prop. Please **refrain** from using any other than text content as slotted markup.<slot> Default slot for the main content