collapse 折叠面板

更新时间：2023-06-25

折叠面板-collapse

折叠面板

一、属性说明

属性名	类型	默认值	必填	说明
title	String	无	是	折叠面板 title
content	String	无	否	折叠面板内容
isShow	Boolean	false	否	初始值打开还是关闭
title	String	无	否	标题展示文字
active	Boolean	false	否	标题文字是否加粗（`font-weight: 600`）
content	String	无	否	内容展示文字
lineClamp	Number	无	否	`text-overflow: ellipsis`时`-webkit-line-clamp`的值
voiceType	String	click	否
voiceTag	String	说明	否
bindchange	Function	无	否	切换状态时的回调
class-name	String	无	否	自定义折叠title的类名
class-name-text	String	无	否	自定义折叠title icon图标的类名

示例：

json:

{
    "navigationBarTitleText": "折叠面板-collapse",
    "usingComponents": {
        "iov-collapse": "iov-ui/lib/collapse"
    }
}

swan:

<view class="collapse-demo">
    <iov-collapse title="岳阳楼记" content="{{content}}" isShow="{{false}}"></iov-collapse>
    <view class="collapse-demo-box">
        <iov-collapse
            bindchange="collapseChange"
            title="岳阳楼记"
            content="{{content}}"
            isShow="{{true}}"
        ></iov-collapse>
    </view>
    <view class="collapse-demo-box">
        <iov-collapse
            bindchange="collapseChange"
            title="岳阳楼记"
            content="{{content}}"
            isShow="{{true}}"
            lineClamp="{{2}}"
        ></iov-collapse>
    </view>
    <view class="collapse-demo-box">
        <iov-collapse title="slot">
            <iov-button>slot</iov-button>
        </iov-collapse>
    </view>
</view>

js:

Page({
    data: {
        content:
            '至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。'
    },
    collapseChange: function (e) {
        console.log(' > e', e.value);
    }
});

checkboxgroup 多项选择器组 icon 图标