介绍

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

引入

import Collapse from 'sard-uniapp/components/collapse/collapse.vue'

代码演示

基础使用

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

vue lang="ts"

<template>
  <sar-button @click="visible = !visible" root-style="margin-bottom: 20rpx">
    {{ visible ? '折叠' : '展开' }}
  </sar-button>

  <sar-collapse :visible="visible">
    <view style="padding: 20rpx; background-color: var(--sar-tertiary-bg)">
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
    </view>
  </sar-collapse>
</template>

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

const visible = ref(false)
</script>

vue lang="js"

<template>
  <sar-button @click="visible = !visible" root-style="margin-bottom: 20rpx">
    {{ visible ? '折叠' : '展开' }}
  </sar-button>

  <sar-collapse :visible="visible">
    <view style="padding: 20rpx; background-color: var(--sar-tertiary-bg)">
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
      <view>collapse</view>
    </view>
  </sar-collapse>
</template>

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

API

CollapseProps

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

CollapseSlots

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

主题定制

CSS 变量

page,
.sar-portal {
  --sar-collapse-transition-duration: var(--sar-duration);
}