Skip to content
On this page

组件库文档 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-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

Collapse

参数名类型默认值描述
activeKeyArray[]当前展开并激活的面板(v-model:active-key),为下面的CollapseItem的name字段合集
defaultActiveKeyArray[]默认展开的面板,为下面的CollapseItem的name字段合集
accordionBoolean,Stringfalse是否设置为单个面板展开,默认fase,允许 多个面板同时展开
borderNumber,String2边框
iconPosString"left"展开图标的位置,可选left/right
openIconv3.0.77+String"tmicon-angle-up"打开时的图标
closeIconv3.0.77+String"tmicon-angle-down"关闭时的图标

CollapseItem

本组件含有公共属性 公共属性

参数名类型默认值描述
colorStringwhite主题色
titleString面板标题
nameNumber, String必填,标识,用来展开和关闭的标识,Collapse的activeKey,defaultActiveKey数组标识就是此值
activeColorStringprimary激活时的颜色主题
marginArray[0, 0]外间距[x,y]x=左右,y=上下
paddingArray[32, 0]内间距[x,y]x=左右,y=上下
disabledBooleanfalse面板是否可以打开或收起
leftIconString""标题前的图标
leftIconColorString""标题前的图标主题颜色,默认为空即自动配色,当激活时,使用activeColor。如果本属性不为空,将始终使用本属性颜色主题。
heightv3.0.77+Number80标题的高度
titleSizeNumber30标题字号大小

🌹 事件

Collapse

事件名参数返回数据描述
change

CollapseItem

事件名参数返回数据描述
click

🌽 slot插槽

CollapseItem含有
插槽:title 标题插槽
icon 即标题前图标插槽 rightLabel v3.0.77+ 右边图标的文本插槽

🥗 ref方法

💏 文档贡献

此页文档由﹎wj潕钶取玳贡献,如果对该框架感兴趣的可以参与我们一同进步!