Collapse

Default

Wrap sections in s-collapse-item with a header slot.

Code copied

<template>
  <s-collapse>
    <s-collapse-item>
      <template #header>Accordion 1</template>
      Content for panel one.
    </s-collapse-item>
    <s-collapse-item>
      <template #header>Accordion 2</template>
      Content for panel two.
    </s-collapse-item>
  </s-collapse>
</template>

Accordion

Keep only one panel open at a time with accordion.

Code copied

<template>
  <s-collapse accordion>
    <s-collapse-item open>
      <template #header>Only one open</template>
      First panel
    </s-collapse-item>
    <s-collapse-item>
      <template #header>Second</template>
      Second panel
    </s-collapse-item>
  </s-collapse>
</template>

Type

Switch container style using the type prop.

Code copied

<template>
  <div class="center">
    <s-collapse type="border">
      <s-collapse-item open
        ><template #header>Border</template>Border style</s-collapse-item
      >
    </s-collapse>
    <s-collapse type="shadow">
      <s-collapse-item open
        ><template #header>Shadow</template>Shadow style</s-collapse-item

    </s-collapse>
  </div>
</template>

<style scoped lang="scss">
.center {
  width: 100%;
  max-width: 520px;
  display: flex;

Open Hover

Open panels on hover instead of click.

Code copied

<template>
  <s-collapse open-hover>
    <s-collapse-item
      ><template #header>Hover me</template>Opens on hover</s-collapse-item
    >

Change Arrow Icon

Customize the expand arrow per panel.

Code copied

<template>
  <s-collapse>
    <s-collapse-item icon-arrow="label">
      <template #header>Collapse item</template>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus
      eros tortor, non fringilla lectus cursus et.
    </s-collapse-item>
    <s-collapse-item icon-arrow="grade">

API