介绍

可以展开/折叠内容区域。

代码演示

基础使用

折叠组件是其他可折叠组件的基础组件。 使用 visible 属性控制折叠框展开或折叠。

vue ts

<template>
  <s-button @click="visible = !visible" style="margin-bottom: 10px">
    {{ visible ? '折叠' : '展开' }}
  </s-button>

  <s-collapse :visible="visible">
    <div style="padding: 10px; background-color: var(--s-fill-color)">
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
    </div>
  </s-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

vue js

<template>
  <s-button @click="visible = !visible" style="margin-bottom: 10px">
    {{ visible ? '折叠' : '展开' }}
  </s-button>

  <s-collapse :visible="visible">
    <div style="padding: 10px; background-color: var(--s-fill-color)">
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
      <div>collapse</div>
    </div>
  </s-collapse>
</template>

<script setup lang="js">
import { ref } from 'vue'
const visible = ref(false)
</script>

API

CollapseProps

属性	描述	类型	默认值
visible	是否可见	boolean	false
content-class	是否可见	ClassValue	-
content-style	是否可见	StyleValue	-
lazy	是否延迟渲染折叠内容	boolean	false
destroy-on-close	关闭时是否销毁折叠内容	boolean	false

CollapseSlots

插槽	描述	属性
default	自定义默认内容	-

主题定制

样式变量

CSS 变量	值
--s-collapse-duration	var(--s-duration)