Collapsible

Allows to toggle the visibility of content

Basic Usage

Collapsible content here

<template>
  <spr-button tone="success" @click="collapsible1 = !collapsible1">Toggle Me</spr-button>
  <spr-collapsible v-model="collapsible1">
    <div class="spr-p-4">Collapsible content here</div>
  </spr-collapsible>
</template>

import { ref } from 'vue'; const collapsible1 = ref(false)

With Card

Contact Info

Lorem ipsum dolor sit amet consectetur. Dui nunc elit vel sit at quis.

Collapsible Content

<template>
  <spr-card
    title="Contact Info"
    subtitle="Lorem ipsum dolor sit amet consectetur. Dui nunc elit vel sit at quis."
    has-collapsible
    :is-collapsible-open="collapsible2"
  >
    <template #header>
      <div class="spr-ml-auto">
        <spr-button variant="secondary" hasIcon size="small" @click="collapsible2 = !collapsible2">
          <Icon icon="ph:caret-down" />
        </spr-button>
      </div>
    </template>

    <!-- Insert Collapsible Card Content -->
    <spr-collapsible v-model="collapsible2">
      <div class="spr-px-4 spr-py-3">Collapsible Content</div>
    </spr-collapsible>
  </spr-card>
</template>

Custom Trigger

Allows to customize the trigger inside collapsible component

Collapsible Content

<template>
  <spr-collapsible v-model="collapsible3">
    <template #trigger="{ toggleCollapsible }">
      <spr-button @click="toggleCollapsible">Custom Trigger</spr-button>
    </template>
    <div>Collapsible Content</div>
  </spr-collapsible>
</template>

Slots

Name	Description
trigger	Custom trigger inside collapsible component

API Reference

Name	Type	Default	Description
transitionDuration	number	150	Sets the collapsible transition duration