AccordionSection

The panel to be used inside an Accordion.

Showcase

First panel

Second panel

Source

<Accordion let:closeOtherPanels>
  <AccordionSection on:panel-open={closeOtherPanels} let:toggle>
    <div slot="handle">
      <Button on:click={toggle}>
        open first panel
        <ChevronDownIcon size="20" class="ml accordion-chevron" />
      </Button>
    </div>
    First panel
  </AccordionSection>
  <AccordionSection
    on:panel-open={closeOtherPanels}
    label="just text is enough"
  >
    Second panel
  </AccordionSection>
</Accordion>

Properties #

Functional Properties

Name	Default	Type	Description
`label`	`null`	`string`	The label text to use on the button that toggles the section. Not used if the `handle` slot is provided.
`open`	`false`	`boolean`	The state of the section: opened or closed.

Class Properties

All <AccordionSection> components use the .panel class for the handle and the section tag for the hidden content.

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the handle.

Bonus: use the `.accordion-chevron` class for the chevrons on the handle to get a nice rotation animation (see showcase).

Events #

Name	Event Detail	Description
`panel-open`	`{ close(), toggle() }`	Fired when the panel is opened. The detail object contains callbacks to close and toggle the panel respectively.
`panel-close`	`{ close(), toggle() }`	Fired when the panel is closed. The detail object contains callbacks to close and toggle the panel respectively.

Slots #

Default slot

The content of the AccordionSection, initially hidden.

`handle` slot

The handle used for opening the hidden content. By default it contains a Button with the text taken from the label prop.

Prop Name	Type	Description
`toggle`	`Function`	A callback to toggle the open state of the current panel.

SCSS Variables #

Name	Description	Default
`$main` From `Button`	The color and hover background of the section handle.	#4300B0
`$font` From `Button`	The font of the section handle.	`'Ubuntu'`
`$button-radius` From `Button`	The curvature radius of the section handle.	`1.5625em`
`$bold-font-weight` From `Button`	The font weight of the section handle.	`500`