antd ColorPicker 颜色选择器

2024-01-08 18:54:10
ColorPicker 属性
allowClear	允许清除选择的颜色	boolean	false	
arrow	配置弹出的箭头	boolean | { pointAtCenter: boolean }	true	
children	颜色选择器的触发器	React.ReactNode	-	
defaultValue	颜色默认的值	string | Color	-	
defaultFormat	颜色格式默认的值	rgb | hex | hsb	-	5.9.0
disabled	禁用颜色选择器	boolean	-	
disabledAlpha	禁用透明度	boolean	-	5.8.0
destroyTooltipOnHide	关闭后是否销毁弹窗	boolean	false	5.7.0
format	颜色格式	rgb | hex | hsb	hex	
open	是否显示弹出窗口	boolean	-
presets	预设的颜色
placement	弹出窗口的位置
panelRender	自定义渲染面板
showText	显示颜色文本
size	设置触发器大小
trigger	颜色选择器的触发模式
value	颜色的值
onChange	颜色变化的回调
onChangeComplete	颜色选择完成的回调
onFormatChange	颜色格式变化的回调
onOpenChange	当 open 被改变时的回调
onClear	清除的回调
color
toHex	转换成 hex 格式字符,返回格式如:1677ff	() => string	-
toHexString	转换成 hex 格式颜色字符串,返回格式如:#1677ff	() => string	-
toHsb	转换成 hsb 对象	() => ({ h: number, s: number, b: number, a number })	-
toHsbString	转换成 hsb 格式颜色字符串,返回格式如:hsb(215, 91%, 100%)	() => string	-
toRgb	转换成 rgb 对象	() => ({ r: number, g: number, b: number, a number })	-
toRgbString	转换成 rgb 格式颜色字符串,返回格式如:rgb(22, 119, 255)	() => string

在这里插入图片描述

 <App>
            <Space direction="vertical">
              {/* <ColorPicker showText={(color) => <span>Custom Text ({color.toHexString()})</span>} /> */}
              <ColorPicker
                value={lineColor}
                defaultValue={lineColor}
                showText={(color) => <span>Custom Text ({color.toHexString()})</span>}
                onChange={(color: any) => {
                  console.log(color.toHexString(), color.metaColor.r);
               
                  let data = color.toHexString();
                  setLogoBgColor(data);
                }}
              />
            </Space>
          </App>

文章来源:https://blog.csdn.net/L_C_sunny/article/details/135458867
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。