react 颜色选择器 Element-React ColorPicker 颜色选择器

2023-04-13 17:31

react 颜色选择器

React 颜色选择器是一种可以让用户从一系列预定义的颜色中选择的工具。它可以帮助用户快速地选择出最合适的颜色，而不必手动输入 RGB 值或 HEX 值。

React 颜色选择器可以使用 HTML5 的 input 类型 color 来实现，也可以使用 JavaScript 库来实现。HTML5 的 input 类型 color 是一个特殊的文本字段，允许用户在浏览器中直接选择颜色。JavaScript 库则是一个独立的应用程序，可以在浏览器中显示出一个颜色选择器，并允许用户在其中进行颜色选择。

import React from 'react';
import ColorPicker from 'react-color-picker';
 
class MyComponent extends React.Component {
  render() {
    return (
        
    );  
  }  

  handleChange = (color) => {   // required 
    this.setState({ color });   // required 
  }  

 }  

 export default MyComponent;

Element-React ColorPicker 颜色选择器

用于颜色选择，支持多种格式。

基础用法

通过value属性控制当前显示的颜色。

render() {
  const color1 = "#20a0ff";
  const color2 = null;
  return (
    <div>
      <div className="block">
        <span className="demonstration">有默认值</span>
        <ColorPicker value={color1}></ColorPicker>
      </div>
      <div className="block">
        <span className="demonstration">无默认值</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

参数	说明	类型	可选值	默认值
showAlpha	是否支持透明度选择	boolean	—	false
colorFormat	写入 value 的颜色的格式	string	hsl / hsv / hex / rgb	hex（show-alpha 为 false）/ rgb（show-alpha 为 true）

Events

事件名称	说明	回调参数
onChange	当绑定值变化时触发	当前值

阅读全文

文章详情

react 颜色选择器 Element-React ColorPicker 颜色选择器

react 颜色选择器

Element-React ColorPicker 颜色选择器

基础用法

选择透明度

Attributes

Events

elementplus导航菜单 ElementPlus 导航

echarts雷达好看的配置 ECharts关于雷达的一些属性设置

ECharts 视觉映射操作

echarts平行坐标系 ECharts平行坐标轴轴线设置

如何框选parallel坐标轴