• gradient-collapse 帶漸變的展開收起
  • 屬性說明
  • 示例
    • 代碼示例

gradient-collapse 帶漸變的展開收起

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

屬性說明

height

String

否

120px

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

expand

Boolean

否

false

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

iconSize

String

否

16px

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

iconColor

String

否

#999

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

show-button

Boolean

否

true

是否有展開 / 收起按鈕

button-text

Array

否

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

展開 / 收起的文案

is-fade-out

Boolean

否

true

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

gradient-collapse-class

String

否

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

gradient-content-class

String

否

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

gradient-collapse-btn-class

String

否

組件外部樣式類，用于修改組件展開 / 收起按鈕樣式

gradient-collapse-btn-text-class

String

否

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

bindexpand

EventHandle

否

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

7c1b002a171a4a7b1c0d17ec087a2e131614653085676

示例

跳轉(zhuǎn)編輯工具

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

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例

• SWAN
• CSS
• JSON

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