Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板，面板之间不影响。

送元二使安西

渭城朝雨浥轻尘，客舍青青柳色新。

劝君更尽一杯酒，西出阳关无故人。

送元二使安西

<template>
  <tu-collapse v-model="activeNames" @change="handleChange">
    <tu-collapse-item title="送元二使安西" name="1">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

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

const activeNames = ref(['1']);

const handleChange = (val: string[]) => {
  console.log(val);
};
</script>

<template>
  <tu-collapse v-model="activeNames" @change="handleChange">
    <tu-collapse-item title="送元二使安西" name="1">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

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

const activeNames = ref(['1']);

const handleChange = (val: string[]) => {
  console.log(val);
};
</script>

手风琴效果

每次只能展开一个面板，通过 accordion 属性来设置是否以手风琴模式显示。

送元二使安西

渭城朝雨浥轻尘，客舍青青柳色新。

劝君更尽一杯酒，西出阳关无故人。

送元二使安西

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

送元二使安西

主题

组件提供了3种不同的主题：up、down、line。通过设置 effect 属性来改变主题，默认为 line。

送元二使安西

<template>
  <tu-radio-group
    v-model="collapseEffect"
    type="button"
    style="margin-bottom: 20px"
  >
    <tu-radio label="outset">上方阴影</tu-radio>
    <tu-radio label="inset">下方阴影</tu-radio>
    <tu-radio label="bordered">边框</tu-radio>
    <tu-radio label="outlined">外轮廓</tu-radio>
    <tu-radio label="flat">扁平</tu-radio>
  </tu-radio-group>

  <tu-collapse :effect="collapseEffect">
    <tu-collapse-item title="送元二使安西" name="1">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

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

const collapseEffect = ref('outset');
</script>

<template>
  <tu-radio-group
    v-model="collapseEffect"
    type="button"
    style="margin-bottom: 20px"
  >
    <tu-radio label="outset">上方阴影</tu-radio>
    <tu-radio label="inset">下方阴影</tu-radio>
    <tu-radio label="bordered">边框</tu-radio>
    <tu-radio label="outlined">外轮廓</tu-radio>
    <tu-radio label="flat">扁平</tu-radio>
  </tu-radio-group>

  <tu-collapse :effect="collapseEffect">
    <tu-collapse-item title="送元二使安西" name="1">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

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

const collapseEffect = ref('outset');
</script>

额外节点

通过 extra 可以设置额外节点。extra 单击可以设置 stop 修饰符，以阻止当前项目展开。

送元二使安西

确定

送元二使安西

<template>
  <tu-collapse>
    <tu-collapse-item title="送元二使安西" name="1">
      <template #extra>
        <tu-icon>
          <Setting />
        </tu-icon>
      </template>
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" extra="确定" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <template #extra>
        <tu-button size="small" @click.stop="save">保存</tu-button>
      </template>
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

<script lang="ts" setup>
import { Setting } from '@tu-view-plus/icons-vue';

const save = () => {
  console.log('save');
};
</script>

<template>
  <tu-collapse>
    <tu-collapse-item title="送元二使安西" name="1">
      <template #extra>
        <tu-icon>
          <Setting />
        </tu-icon>
      </template>
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" extra="确定" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <template #extra>
        <tu-button size="small" @click.stop="save">保存</tu-button>
      </template>
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

<script lang="ts" setup>
import { Setting } from '@tu-view-plus/icons-vue';

const save = () => {
  console.log('save');
};
</script>

不同尺寸

组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。

超小较小中等较大

送元二使安西

<template>
  <tu-radio-group
    v-model="collapseSize"
    type="button"
    style="margin-bottom: 20px"
  >
    <tu-radio label="mini">超小</tu-radio>
    <tu-radio label="small">较小</tu-radio>
    <tu-radio label="medium">中等</tu-radio>
    <tu-radio label="large">较大</tu-radio>
  </tu-radio-group>

  <tu-collapse :size="collapseSize">
    <tu-collapse-item title="送元二使安西" name="1">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

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

const collapseSize = ref('medium');
</script>

<template>
  <tu-radio-group
    v-model="collapseSize"
    type="button"
    style="margin-bottom: 20px"
  >
    <tu-radio label="mini">超小</tu-radio>
    <tu-radio label="small">较小</tu-radio>
    <tu-radio label="medium">中等</tu-radio>
    <tu-radio label="large">较大</tu-radio>
  </tu-radio-group>

  <tu-collapse :size="collapseSize">
    <tu-collapse-item title="送元二使安西" name="1">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="2">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
    <tu-collapse-item title="送元二使安西" name="3">
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-collapse-item>
  </tu-collapse>
</template>

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

const collapseSize = ref('medium');
</script>

Collapse API

Collapse Attributes

参数名	描述	类型	默认值
model-value / v-model	当前激活的面板	`String` `Array`	-
accordion	是否手风琴模式	`Boolean`	false
effect	主题	`String`	outset
size	尺寸	`String`	medium

Collapse Events

事件名	描述	参数
change	当前激活面板改变时触发	`Function`

Collapse Slots

参数名	描述
default	Collapse Item

Collapse-Item API

Collapse-Item Attributes

参数名	描述	类型	默认值
name	唯一标志符	`String` `Number`	-
title	面板标题	`String`	-
extra	右上角的操作区域	`String`	-
disabled	是否禁用	`Boolean`	false

Collapse-Item Slots

参数名	描述
default	Collapse Item 内容
title	Collapse Item 标题
extra	Collapse Item 额外内容

Collapse 折叠面板 ​

基础用法 ​

手风琴效果 ​

自定义面板标题 ​

主题 ​

额外节点 ​

不同尺寸 ​

Collapse API ​

Collapse Attributes ​

Collapse Events ​

Collapse Slots ​

Collapse-Item API ​

Collapse-Item Attributes ​

Collapse-Item Slots ​

Collapse 折叠面板

基础用法

手风琴效果

自定义面板标题

主题

额外节点

不同尺寸

Collapse API

Collapse Attributes

Collapse Events

Collapse Slots

Collapse-Item API

Collapse-Item Attributes

Collapse-Item Slots