antd ColorPicker 颜色选择器

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>} /> */}<ColorPickervalue={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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/606873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【独家解密】Java中定时任务的解决方案详解

目录 1、前言 2、定时任务的概述 2.1 什么是定时任务 2.2 定时任务的应用场景 3、使用Timer类和TimerTask类 3.1 Timer类的使用方法 3.2 TimerTask类的使用方法 4、使用ScheduledThreadPoolExecutor类 4.1 ScheduledThreadPoolExecutor类的使用方法 5、使用Spring框架…

ComfyUI报错AttributeError: module ‘cv2.gapi.wip.draw‘ has no attribute ‘Text‘

ComfyUI在安装comfyui-reactor-node插件,然后启动之后突然报错: AttributeError: module cv2.gapi.wip.draw has no attribute Text 这是怎么回事呢? 于是四处搜寻答案。 总之就是opencv-python版本的问题导致的。 我将有可能解决办法的方法进行了总结。 下面列出所有解…

操作系统实验二

实验二 观察Linux行为&#xff0c;使用proc文件系统 一、实验目的 学习Linux内核、进程、存储和其他资源的一些重要特征。读/proc/stat文件&#xff0c;计算并显示系统CPU占用率和用户态CPU占用率。&#xff08;编写一个程序使用/proc机制获得以及修改机器的各种资源参数。需要…

安卓上使用免费的地图OpenStreetMap

前一段使用了微信的地图&#xff0c;非常的好用。但是存在的问题是海外无法使用&#xff0c;出国就不能用了&#xff1b; 其实国内三家&#xff1a;百度&#xff0c;高德&#xff0c;微信都是一样的问题&#xff0c;当涉及到商业使用的时候需要付费&#xff1b; 国外除了谷歌…

51单片机介绍

1 单片机简介 单片机&#xff0c;英文Micro Controller Unit&#xff0c;简称MCU 内部集成了CPU、RAM、ROM、定时器、中断系统、通讯接口等一系列电脑的常用硬件功能 单片机的任务是信息采集&#xff08;依靠传感器&#xff09;、处理&#xff08;依靠CPU&#xff09;和硬件设…

2.6 KERNEL LAUNCH

图2.15在vecAdd函数中显示最终主机代码。此源代码完成了图2.6.中的骨架。2.12和2.15共同说明了一个简单的CUDA程序&#xff0c;该程序由主机代码和设备内核组成。该代码是硬接的&#xff0c;每个线程块使用256个线程。然而&#xff0c;使用的线程块的数量取决于向量&#xff08…

jenkins通过流水线自动部署项目(k8s部署)

参考&#xff1a;https://www.cnblogs.com/rb2010/p/16195443.html docker 拉取镜像到本地&#xff1a; docker pull docker.io/jenkins/jenkins:2.164配置卷挂载&#xff1a;使用nfs 参考&#xff1a;https://www.kuboard.cn/learning/k8s-intermediate/persistent/nfs.htm…

指针传参误区

C语言中指针作为形参传递时&#xff0c;func&#xff08;*a, *b&#xff09; 这种形式的话&#xff0c;是无法通过简单的 ab来修改的&#xff0c;在函数体内a的地址确实被修改成b的地址了&#xff0c;但是当函数执行结束时&#xff0c;a的地址会重新回到原本的地址里面&#xf…

卷积神经网络|猫狗分类系列--导入kaggle猫狗数据集

解决任何真实问题的重要一步是获取数据&#xff0c;Kaggle提供了大量不同数据科学问题的竞赛。 我们将从 https://www.kaggle.com/competitions/dogs-vs-cats/data 下载猫狗数据集&#xff0c;并对其进行一定的操作&#xff0c;以正确的导入到我们的计算机&#xff0c;为接下…

四 视图

1、实验目的 理解SQL成熟设计基本规范&#xff0c;能够熟练使用SQL语句来创建需要的视图&#xff0c;定义数据库外模式&#xff0c;并能使用所创建的视图实现数据管理。 2、实验内容及要求 使用SQL对数据库进行各类查询数据操纵操作&#xff0c;掌握单行数据插入、多行数据插…

设计模式的艺术P1基础—第1章 概述

刘伟&#xff0c;2020 概述&#xff1a;4部分&#xff0c;26章。 P1:基础&#xff08;1-2章&#xff09; P2:创建型设计模式&#xff08;创建艺术&#xff0c;3-8章&#xff09; P3:结构型设计模式&#xff08;组合艺术&#xff0c;9-15章&#xff09; P4:行为型设计模式&…

2_工厂设计_工厂方法和抽象工厂

工厂设计模式-工厂方法 1.概念 工厂方法模式(Fatory Method Pattern ) 是指定义一个创建对象的接口&#xff0c;但让实现这个接口的类来决定实例化哪个类&#xff0c;工厂方法让类的实例化推迟到子类中进行。 在工厂方法模式中用户只需要关心所需产品对应的工厂&#xff0c;…

AUTOSAR开发文档

目录 目录 状态机电源管理开发... I 文档... I 1. 综述... 1 2. 系统硬件架构图... 1 3. 状态机设计方案... 2 4. 电源管理方案... 4 综述 本文档主要描述了MCU芯片TC297的AUTOSAR方案。MCU的基础软件由AUTOSAR软件实现&#xff0…

嵌入式——循环队列

循环队列 (Circular Queue) 是一种数据结构(或称环形队列、圆形队列)。它类似于普通队列,但是在循环队列中,当队列尾部到达数组的末尾时,它会从数组的开头重新开始。这种数据结构通常用于需要固定大小的队列,例如计算机内存中的缓冲区。循环队列可以通过数组或链表实现,…

微信小程序实战-01翻页时钟-1

文章目录 前言需求分析功能设计界面设计界面结构设计界面样式设计 逻辑设计 单页功能实现运行结果 前言 我经常在手机上用的一款app有一个功能是翻页时钟&#xff0c;基于之前学习的小程序相关的基础内容&#xff0c;我打算在微信小程序中也设计一个翻页时钟功能&#xff0c;J…

大模型实战营Day2 作业

基础作业 1 使用 InternLM-Chat-7B 模型生成 300 字的小故事 2 熟悉 hugging face 下载功能&#xff0c;使用 huggingface_hub python 包&#xff0c;下载 InternLM-20B 的 config.json 文件到本地 进阶作业 1 完成浦语灵笔的图文理解及创作部署 2 完成 Lagent 工具调用 Demo…

大数据计算基础真题回忆

转载学长20 21的真题 转载链接 注&#xff1a;每年的课件可能会有更改&#xff0c;内容不一样&#xff0c;所以读者复习的时候以所在年份的课件为准 2020 ​ 2021 笔者2023秋 2023 都是大题&#xff0c;没有选择题。 改进的近似算法中&#xff0c;结合具体的例子说明&am…

【Linux】Linux系统编程——Linux命令解析器

【Linux】Linux系统编程——Linux命令解析器 什么是Linux 命令解析器&#xff1f; Linux 命令解析器&#xff0c;通常被称为 shell&#xff0c;是 Linux 操作系统中的一个关键组件。它充当用户和系统内核之间的接口&#xff0c;允许用户通过输入命令来控制和管理操作系统和应…

计算机丢失mfc140.dll怎么办?解决mfc140.dll缺失的3种方法分享

计算机丢失mfc140.dll怎么办&#xff1f;在使用微软办公软件的时候&#xff0c;可能会弹出一个错误提示框说“找不到mfc140.dll&#xff0c;无法继续执行代码”。为了不影响工作效率&#xff0c;我们可能需要亲自动手尝试修复这一问题。以下是一些mfc140.dll缺失的3种方法相关介…

LED显示屏控制卡常见问题详解

LED显示屏控制卡是LED图文显示屏的关键组件&#xff0c;主要负责接收来自计算机串行口的图像显示信息&#xff0c;将其放入帧存储器&#xff0c;并按照分区驱动方式生成LED显示屏所需的串行显示数据和扫描控制时序。带你5分钟了解LED显示屏控制系统。本文将针对LED显示屏控制卡…