组件库文档 tmui.design
折叠面板 Collapse
通过折叠面板收纳内容区域。
🌶️ 折叠面板 Collapse 示例效果
查看模拟效果+
示例代码
vue
<template>
<tm-app>
<tm-sheet :margin="[0,32]">
<tm-text :font-size="24" _class="font-weight-b" label="可展开多个,不建议嵌套使用,尽管兼容,但影响性能."></tm-text>
</tm-sheet>
<tm-collapse :defaultActiveKey="['2']">
<tm-collapse-item title="面板标题1" name="1">
<view class="pa-24">
<tm-text :font-size="28" _class="font-weight-b" label="这是折叠面板这是折叠面板这是折叠面板这是折叠面板这是折叠面板"></tm-text>
</view>
</tm-collapse-item>
<tm-collapse-item title="面板标题2" name="2">
<view class="pa-24">
<tm-text :font-size="28" _class="font-weight-b" label="这是折叠面板这是折叠面板这是折叠面板这是折叠面板这是折叠面板"></tm-text>
</view>
</tm-collapse-item>
<tm-collapse-item left-icon="tmicon-check-circle-fill" title="面板标题3,允许嵌套使用,展开嵌套面板" name="3">
<view class="pa-24">
<tm-image :width="300" :height="200" src="https://img1.baidu.com/it/u=275574909,2468810396&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750">
</tm-image>
</view>
</tm-collapse-item>
</tm-collapse>
<tm-sheet :margin="[0,32]">
<tm-text :font-size="24" _class="font-weight-b" label="只允许单个展开"></tm-text>
</tm-sheet>
<tm-collapse :accordion="true" :defaultActiveKey="['1']">
<tm-collapse-item title="只能展开一个1" name="1">
<view class="pa-24">
<tm-text :font-size="28" _class="font-weight-b" label="这是折叠面板这是折叠面板这是折叠面板这是折叠面板这是折叠面板"></tm-text>
</view>
</tm-collapse-item>
<tm-collapse-item color="primary" linear="right" activeColor="white" title="随便更改背景" name="2">
<view class="pa-24">
<tm-text :font-size="28" _class="font-weight-b" label="这是折叠面板这是折叠面板这是折叠面板这是折叠面板这是折叠面板"></tm-text>
</view>
</tm-collapse-item>
<tm-collapse-item title="只能展开一个3" name="3">
<view class="pa-24">
<tm-text :font-size="28" _class="font-weight-b" label="这是折叠面板这是折叠面板这是折叠面板这是折叠面板这是折叠面板"></tm-text>
</view>
</tm-collapse-item>
</tm-collapse>
</tm-app>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmIcon from "@/tmui/components/tm-icon/tm-icon.vue"
import tmCollapse from "@/tmui/components/tm-collapse/tm-collapse.vue"
import tmCollapseItem from "@/tmui/components/tm-collapse-item/tm-collapse-item.vue"
import tmImage from "@/tmui/components/tm-image/tm-image.vue"
const listimg = [
"https://picsum.photos/200/300?id=43335",
"https://picsum.photos/200/300?id=433",
"https://picsum.photos/200/300?id=439",
"https://picsum.photos/200/300?id=459",
]
const listvedio = ["https://picsum.photos/200/300?id=43335", {
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
img: "https://picsum.photos/200/300?id=43335",
type: "video"
},
"https://picsum.photos/200/300?id=433"
]
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
Collapse
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
activeKey | Array | [] | 当前展开并激活的面板(v-model:active-key),为下面的CollapseItem的name字段合集 |
defaultActiveKey | Array | [] | 默认展开的面板,为下面的CollapseItem的name字段合集 |
accordion | Boolean,String | false | 是否设置为单个面板展开,默认fase,允许 多个面板同时展开 |
border | Number,String | 2 | 边框 |
iconPos | String | "left" | 展开图标的位置,可选left/right |
openIconv3.0.77+ | String | "tmicon-angle-up" | 打开时的图标 |
closeIconv3.0.77+ | String | "tmicon-angle-down" | 关闭时的图标 |
CollapseItem
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
color | String | white | 主题色 |
title | String | 面板标题 | |
name | Number, String | 必填,标识,用来展开和关闭的标识,Collapse的activeKey,defaultActiveKey数组标识就是此值 | |
activeColor | String | primary | 激活时的颜色主题 |
margin | Array | [0, 0] | 外间距[x,y]x=左右,y=上下 |
padding | Array | [32, 0] | 内间距[x,y]x=左右,y=上下 |
disabled | Boolean | false | 面板是否可以打开或收起 |
leftIcon | String | "" | 标题前的图标 |
leftIconColor | String | "" | 标题前的图标主题颜色,默认为空即自动配色,当激活时,使用activeColor。如果本属性不为空,将始终使用本属性颜色主题。 |
heightv3.0.77+ | Number | 80 | 标题的高度 |
titleSize | Number | 30 | 标题字号大小 |
🌹 事件
Collapse
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
change |
CollapseItem
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click |
🌽 slot插槽
CollapseItem含有
插槽:title 标题插槽
icon 即标题前图标插槽 rightLabel v3.0.77+ 右边图标的文本插槽
🥗 ref方法
无
💏 文档贡献
此页文档由﹎wj潕钶取玳贡献,如果对该框架感兴趣的可以参与我们一同进步!