gradient-collapse 带渐变的展开收起
- 属性说明
- 示例
  - 代码示例

gradient-collapse 带渐变的展开收起

解释：带渐变的展开收起组件，可自定义组件内容( slot 插入)，并在收起的内容最后提供渐变效果。

属性说明

属性名	类型	必填	默认值	说明
height	String	否	120px	组件内容的可见的高度
expand	Boolean	否	false	组件初始状态是否展开（默认为收起状态）
iconSize	String	否	16px	查看更多 / 收起文字后向上 / 向下图标的大小
iconColor	String	否	#999	展开 / 收起文字后向上 / 向下图标的颜色
show-button	Boolean	否	true	是否有展开 / 收起按钮
button-text	Array	否	[‘查看更多’, ‘收起’]	展开 / 收起的文案
is-fade-out	Boolean	否	true	底部是否有渐隐的效果,需要配合 show-button：true 使用
gradient-collapse-class	String	否		组件的外部样式类，用于修改组件最外层样式
gradient-content-class	String	否		组件外部样式类，用于修改组件内容区样式
gradient-collapse-btn-class	String	否		组件外部样式类，用于修改组件展开 / 收起按钮样式
gradient-collapse-btn-text-class	String	否		组件外部样式类，用于修改展开 / 收起按钮文字样式
bindexpand	EventHandle	否		点击展开 / 收起按钮时触发，用于获取组件展开 / 收起状态，需要配合`show-button：true`使用

7c1b002a171a4a7b1c0d17ec087a2e131614653085676

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
CSS
JSON

<view>默认状态</view>
    <gradient-collapse>
        <!--此处可换成dom结构或者自定义组件-->
        <view class="content">内容显示区</view>
    </gradient-collapse>
</view>
<view>无收起样式</view>
    <gradient-collapse
        is-fade-out="{{false}}"
        show-button="{{false}}">
        <view class="content">内容显示区</view>
    </gradient-collapse>
</view>