• gradient-collapse 帶漸變的展開(kāi)收起
  • 屬性說(shuō)明
  • 示例
    • 代碼示例

gradient-collapse 帶漸變的展開(kāi)收起

解釋：帶漸變的展開(kāi)收起組件，可自定義組件內(nèi)容( slot 插入)，并在收起的內(nèi)容最后提供漸變效果。

屬性說(shuō)明

height

String

否

120px

組件內(nèi)容的可見(jiàn)的高度

expand

Boolean

否

false

組件初始狀態(tài)是否展開(kāi)（默認(rèn)為收起狀態(tài)）

iconSize

String

否

16px

查看更多 / 收起文字后向上 / 向下圖標(biāo)的大小

iconColor

String

否

#999

展開(kāi) / 收起文字后向上 / 向下圖標(biāo)的顏色

show-button

Boolean

否

true

是否有展開(kāi) / 收起按鈕

button-text

Array

否

[‘查看更多’, ‘收起’]

展開(kāi) / 收起的文案

is-fade-out

Boolean

否

true

底部是否有漸隱的效果,需要配合 show-button：true 使用

gradient-collapse-class

String

否

組件的外部樣式類，用于修改組件最外層樣式

gradient-content-class

String

否

組件外部樣式類，用于修改組件內(nèi)容區(qū)樣式

gradient-collapse-btn-class

String

否

組件外部樣式類，用于修改組件展開(kāi) / 收起按鈕樣式

gradient-collapse-btn-text-class

String

否

組件外部樣式類，用于修改展開(kāi) / 收起按鈕文字樣式

bindexpand

EventHandle

否

點(diǎn)擊展開(kāi) / 收起按鈕時(shí)觸發(fā)，用于獲取組件展開(kāi) / 收起狀態(tài)，需要配合show-button：true使用

7c1b002a171a4a7b1c0d17ec087a2e131614653085676

示例

跳轉(zhuǎn)編輯工具

在開(kāi)發(fā)者工具中打開(kāi)

在 WEB IDE 中打開(kāi)

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例

• SWAN
• CSS
• JSON

 
 
 
  
  
  
默認(rèn)狀態(tài)
  
  
  
 
  
  
  
 
  
  
  
 內(nèi)容顯示區(qū)
  
  
  
 
  
  
  
  
  
  
無(wú)收起樣式
  
  
  
 
  
  
  
 is-fade-out="{{false}}"
  
  
  
 show-button="{{false}}">
  
  
  
 內(nèi)容顯示區(qū)