Collapse 折叠面板

通过折叠面板收纳长内容。

基础用法

与真实产品保持一致的交互与视觉。

<script setup>
import { ref } from 'vue'
import { DanCollapse, DanCollapseItem } from '@dandan-ui/ui'
const active = ref(['1'])
</script>
<template>
  <DanCollapse v-model="active">
    <DanCollapseItem title="一致性 Consistency" name="1"
      >与真实产品保持一致的交互与视觉。</DanCollapseItem
    >
    <DanCollapseItem title="反馈 Feedback" name="2"
      >及时反馈用户操作结果。</DanCollapseItem
    >
    <DanCollapseItem title="效率 Efficiency" name="3"
      >用清晰信息减少决策成本。</DanCollapseItem
    >
  </DanCollapse>
</template>

Collapse Props

属性	说明	类型	默认值
modelValue / v-model	当前展开项	string | number | Array	[]
accordion	手风琴模式	boolean	false

CollapseItem Props

属性	说明	类型	默认值
title	标题	string	''
name	唯一标识，默认用 title	string | number	—
disabled	禁用	boolean	false