Element-React ColorPicker 顏色選擇器

2020-10-16 10:54 更新

用于顏色選擇,支持多種格式。

基礎(chǔ)用法

通過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>
  )
}

Attributes

參數(shù) 說明 類型 可選值 默認(rèn)值
showAlpha 是否支持透明度選擇 boolean false
colorFormat 寫入 value 的顏色的格式 string hsl / hsv / hex / rgb hex(show-alpha 為 false)/ rgb(show-alpha 為 true)

Events

事件名稱 說明 回調(diào)參數(shù)
onChange 當(dāng)綁定值變化時(shí)觸發(fā) 當(dāng)前值
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)