- 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扫码
代码示例
默认状态 内容显示区 无收起样式 is-fade-out="{{false}}" show-button="{{false}}"> 内容显示区
分享名称：创新互联百度小程序教程：gradient-collapse 带渐变的展开收起
本文链接：
http://chengdu.cdxwcx.cn/article/ccidphp.html
