W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵(lì)
用于顏色選擇,支持多種格式。
通過value屬性控制當(dāng)前顯示的顏色。
render() {
const color1 = '#20a0ff';
const color2 = null;
return (
<div>
<div className="block">
<span className="demonstration">有默認(rèn)值</span>
<ColorPicker value={color1}></ColorPicker>
</div>
<div className="block">
<span className="demonstration">無默認(rèn)值</span>
<ColorPicker value={color2}></ColorPicker>
</div>
</div>
)
}
ColorPicker 支持普通顏色,也支持帶 Alpha 通道的顏色,通過showAlpha
屬性即可控制是否支持透明度的選擇。
render() {
const color3 = 'rgba(19, 206, 102, 0.8)';
return (
<div style={{padding: '24px'}}>
<ColorPicker value={color3} showAlpha></ColorPicker>
</div>
)
}
參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
showAlpha | 是否支持透明度選擇 | boolean | — | false |
colorFormat | 寫入 value 的顏色的格式 | string | hsl / hsv / hex / rgb | hex(show-alpha 為 false)/ rgb(show-alpha 為 true) |
事件名稱 | 說明 | 回調(diào)參數(shù) |
---|---|---|
onChange | 當(dāng)綁定值變化時(shí)觸發(fā) | 當(dāng)前值 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: