Collapse

Use v-model and accordion to control collapsible panels.

Supports arbitrary DOM element content.

Basic Usage

Item A

headline title

this is content

Item B

Content B

<script setup lang="ts">
import { ref } from 'vue'
const activeNames = ref(['a'])
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue' 
</script>

<template>
  <Collapse v-model="activeNames">
    <CollapseItem name="a" title="Item A">
        <h1>headline title</h1>
        <div> this is content </div>
    </CollapseItem>
    <CollapseItem name="b" title="Item B">
      Content B
    </CollapseItem>
  </Collapse>
</template>

Accordion Mode

Accordion Item A

Content Section A

Accordion Item B

Content Section B

Accordion Item C

Content Section C

<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref(['a'])
</script>

<template>
  <Collapse v-model="activeNames" accordion>
    <CollapseItem name="a" title="Accordion Item A">
      <div>Content Section A</div>
    </CollapseItem>
    <CollapseItem name="b" title="Accordion Item B">
      <div>Content Section B</div>
    </CollapseItem>
    <CollapseItem name="c" title="Accordion Item C">
      <div>Content Section C</div>
    </CollapseItem>
  </Collapse>
</template>

Disabled State

Normal Item

Interactive Content

Disabled Item

This content cannot be expanded

<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref(['a'])
</script>

<template>
  <Collapse v-model="activeNames">
    <CollapseItem name="a" title="Normal Item">
      <div>Interactive Content</div>
    </CollapseItem>
    <CollapseItem 
      name="b" 
      title="Disabled Item"
      disabled
    >
      <div>This content cannot be expanded</div>
    </CollapseItem>
  </Collapse>
</template>

Collapse Attributes

Name	Description	Type	Default
modelValue	current active panels	NameType[]	[]
accordion	accordion mode	boolean	false

Collapse Events

Name	Description	Type
change	triggers when active panels change	(value: NameType[]) => void

Type Definition

export type NameType = string | number