TUI

<template>
  <div class="component-card-demo-wrap collapse-demo-column">
    <TsButton class="collapse-demo-button" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</TsButton>
    <TsCollapse v-model="isExpand">
      <div class="collapse-demo-panel">这是基础折叠面板内容，支持任意自定义内容。</div>
    </TsCollapse>
  </div>
</template>

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

const isExpand = ref(true);
</script>

<style scoped>
.collapse-demo-column {
  flex-direction: column;
  gap: 8px;
}

.collapse-demo-button {
  width: fit-content;
}

.collapse-demo-panel {
  padding: 16px;
  background: #f5f5f5;
}
</style>

<template>
  <div class="component-card-demo-wrap collapse-demo-column">
    <TsButton class="collapse-demo-button" @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</TsButton>
    <TsCollapse v-model="isExpand" :collapsedHeight="40" :transitionDuration="300">
      <div class="collapse-demo-panel collapse-demo-panel--cyan">这里是带有自定义折叠高度的内容。</div>
    </TsCollapse>
  </div>
</template>

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

const isExpand = ref(false);
</script>

<style scoped>
.collapse-demo-column {
  flex-direction: column;
  gap: 8px;
}

.collapse-demo-button {
  width: fit-content;
}

.collapse-demo-panel {
  padding: 16px;
  background: #f5f5f5;
}

.collapse-demo-panel--cyan {
  background: #e0f7fa;
}
</style>

<template>
  <div class="component-card-demo-wrap collapse-demo-column">
    <div class="collapse-demo-actions">
      <TsButton @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</TsButton>
      <TsButton @click="addItem">添加内容</TsButton>
    </div>

    <TsCollapse v-model="isExpand" v-model:forceOnExpand="forceOnExpand">
      <div class="collapse-demo-panel collapse-demo-panel--purple">
        <ul class="collapse-demo-list">
          <li v-for="(item, idx) in dynamicList" :key="idx">{{ item }}</li>
        </ul>
      </div>
    </TsCollapse>
  </div>
</template>

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

const isExpand = ref(false);
const dynamicList = ref(['列表项 1', '列表项 2', '列表项 3']);
const forceOnExpand = ref(false);

const addItem = () => {
  dynamicList.value.push(`列表项 ${dynamicList.value.length + 1}`);
  forceOnExpand.value = true;
};
</script>

<style scoped>
.collapse-demo-column {
  flex-direction: column;
  gap: 8px;
}

.collapse-demo-actions {
  display: inline-flex;
  column-gap: 8px;
}

.collapse-demo-panel {
  margin-top: 8px;
  padding: 16px;
  background: #f5f5f5;
}

.collapse-demo-panel--purple {
  background: #f3e5f5;
}

.collapse-demo-list {
  margin: 0;
  padding-left: 18px;
}
</style>

<template>
  <div class="component-card-demo-wrap collapse-demo-column">
    <TsButton @click="isExpand = !isExpand">{{ isExpand ? '收起' : '展开' }}</TsButton>
    <TsCollapse v-model="isExpand" :transitionDuration="500">
      <div class="collapse-demo-panel collapse-demo-panel--orange">
        <h3 class="collapse-demo-title">标题</h3>
        <p class="collapse-demo-text">这里是通过插槽传入的复杂内容，支持多元素嵌套。</p>
        <TsButton @click="handleToast">内部按钮</TsButton>
      </div>
    </TsCollapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsCollapse } from 'tui';
import TsToast from 'tui/components/toast';

const isExpand = ref(false);

const handleToast = () => {
  TsToast({ message: '按钮内部点击事件' });
};
</script>

<style scoped>
.collapse-demo-column {
  flex-direction: column;
  gap: 8px;
}

.collapse-demo-panel {
  margin-top: 8px;
  padding: 16px;
  background: #fff3e0;
}

.collapse-demo-title {
  margin: 0 0 8px;
}

.collapse-demo-text {
  margin: 0 0 12px;
  line-height: 24px;
}
</style>