- 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 |
否 |
点击展开 / 收起按钮时触发，用于获取组件展开 / 收起状态，需要配合 |
7c1b002a171a4a7b1c0d17ec087a2e131614653085676
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- CSS
- JSON
<view>默认状态</view><gradient-collapse><!--此处可换成dom结构或者自定义组件--><view class="content">内容显示区</view></gradient-collapse></view><view>无收起样式</view><gradient-collapseis-fade-out="{{false}}"show-button="{{false}}"><view class="content">内容显示区</view></gradient-collapse></view>
