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框架…

代码随想录第四十五天——爬楼梯,零钱兑换,完全平方数

leetcode 70. 爬楼梯 题目链接&#xff1a;爬楼梯 爬楼梯也可以通过完全背包的解法求解。 确定dp数组以及下标的含义 dp[i]&#xff1a;爬到有i个台阶的楼顶&#xff0c;有dp[i]种方法确定递推公式 求装满背包的方法数的递推公式都是dp[i] dp[i - nums[j]] 所以本题的递推公…

如何保障 MySQL 和 Redis 的数据一致性?

数据一致性问题是如何产生的&#xff1f; 数据一致性问题通常产生于数据在不同的时间点、地点或系统中存在多个副本的情况&#xff0c; 系统只存在一个副本的情况下也完全可能会产生。 设想一下&#xff0c;你在一家连锁咖啡店有一张会员卡这张会员卡可以绑定两个账号&#x…

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 设备模型之类

我们在本章中要考察最后的设备模型概念是类.一个类是一个设备的高级视图, 它抽象出 低级的实现细节. 驱动可以见到一个 SCSI 磁盘或者一个 ATA 磁盘, 在类的级别, 它们都 是磁盘. 类允许用户空间基于它们做什么来使用设备, 而不是它们如何被连接或者它们如 何工作. 几乎所有的类…

操作系统实验二

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

优化改进YOLOv5算法之AKConv(可改变核卷积),即插即用的卷积,效果秒杀DSConv

1 AKConv原理 AKConv: Convolutional Kernel with Arbitrary Sampled Shapes andArbitrary Number of Parameters 摘要:基于卷积运算的神经网络在深度学习领域取得了令人瞩目的成果,但标准卷积运算存在两个固有的缺陷。一方面,卷积运算仅限于局部窗口,无法捕获其他位置的…

安卓上使用免费的地图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;和硬件设…

【Leetcode】227.基本计算器II

一、题目 1、题目描述 给你一个字符串表达式 s ,请你实现一个基本计算器来计算并返回它的值。 整数除法仅保留整数部分。 你可以假设给定的表达式总是有效的。所有中间结果将在 [ − 2 31 , 2 31 − 1 ] [-2^{31}, 2^{31} - 1] [−2

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…

RT-DETR改进Shape-IoU损失函数:考虑边界框形状和比例的更准确的指标

💡本篇内容:RT-DETR改进Shape-IoU损失函数:考虑边界框形状和比例的更准确的指标 💡🚀🚀🚀本博客 改进源代码改进 适用于 RT-DETR 按步骤操作运行改进后的代码即可 💡参考论文地址:https://arxiv.org/abs/2312.17663 2023年12月最新发表论文:IoU最新的损失函数…

指针传参误区

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:行为型设计模式&…

【设计模式】 模板方法模式

前言 1. 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a;保证一个类只有一个实例&#xff0c;并提供一个全局的访问点。 2. 工厂模式&#xff08;Factory Pattern&#xff09;&#xff1a;定义一个创建对象的接口&#xff0c;但由子类决定要实例化的类是哪一…

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

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

css——box-shadow阴影效果

/* box-shadow&#xff1a;内外阴影(inset:内阴影,水平阴影,垂直阴影,阴影模糊距离,阴影大小,阴影颜色) */box-shadow: 0 0 50px #ccc; 引用来源&#xff1a;box-shadow详解_box-shadow属性详解-CSDN博客