• 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

 
 
 
  
  
  
默认状态
  
  
  
 
  
  
  
 
  
  
  
 内容显示区
  
  
  
 
  
  
  
  
  
  
无收起样式
  
  
  
 
  
  
  
 is-fade-out="{{false}}"
  
  
  
 show-button="{{false}}">
  
  
  
 内容显示区