摘要:简单的颜色选择器不使用插件或是任何图片无需任何依赖库和近似的体验支持和格式输入支持和输出可监听的事件可通过自定义的扁平化设计同时可在与浏览器中正常工作演示请访问该页面查看在线您可以通过浏览页面源代码了解基本的使用方法安装与使用安装对象和
Simple Color Picker - 简单的颜色选择器
不使用Flash插件或是任何图片
无需任何依赖库
和Photoshop近似的体验
支持 HEX 和 RGB 格式输入
支持 HEX, RGB 和 HSB/HSV 输出
可监听的 onchange 事件
可通过 CSS 自定义的扁平化设计
同时可在 Electron 与浏览器中正常工作
Demo 演示请访问该页面查看在线DEMO
您可以通过浏览DEMO页面源代码了解基本的使用方法
安装与使用 安装 Electron Webviewconst ColorPicker = require(`./lib/color-picker.js`).ColorPicker const colorPickerObject = new ColorPicker({ dom: document.getElementById("colorPicker"), // DOM 对象 value: "#00FF00" //和 {r:0,g:255,b:0} , "0F0" 以及 "00FF00" 具有相同作用 })浏览器
然后,您只需要实例化一个 ColorPicker 对象即可
const pickers = [ new ColorPicker({ dom: document.getElementById("picker1"), value: "#0F0" }), new ColorPicker({ dom: document.getElementById("picker2"), value: { r: 0, g: 0, b: 255 } }), new ColorPicker({ dom: document.getElementById("picker3") }) ]Usage
// 创建了一个 ColorPicker 数组 const pickers = [ new ColorPicker({ dom: document.getElementById("picker1"), value: "#0F0" }), new ColorPicker({ dom: document.getElementById("picker2"), value: { r: 0, g: 0, b: 255 } }), new ColorPicker({ dom: document.getElementById("picker3") }) ] pickers.forEach(colorP => colorP.addEventListener("change", event => { pickers.forEach(colorPs => { if (colorP !== colorPs) colorPs.value = colorP.value }) }) ) // 您可以按照以下多种方式格式化值 "hex", "rgb", "hsb" 或是简单的hex颜色 // 示例 const valueGetSample = new ColorPicker({ value: "#ABC" }) // 与 "#AABBCC" 相同 const hex = valueGetSample.getValue("hex") // "AABBCC" const rgb = valueGetSample.getValue("rgb") // {r: 170, g: 187, b: 204} const hsb = valueGetSample.getValue("hsb") // {h: 210, s: 0.16666666666666663, b: 0.8} const value = valueGetSample.getValue("value") // 与 valueGetSample.value 返回值相同为什么做这个
纯粹是因为github上找不到感觉符合一个小玩具的设计风格基于原生的JS颜色选择器,
于是干脆自己写一个好了,万一还能骗几个Star呢?(逃)
最后在玩着海王星和睡觉穿插着算是写了一个第一版,草草写了一下readme就发出来了,以上,全部。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95349.html
摘要:简单的颜色选择器不使用插件或是任何图片无需任何依赖库和近似的体验支持和格式输入支持和输出可监听的事件可通过自定义的扁平化设计同时可在与浏览器中正常工作演示请访问该页面查看在线您可以通过浏览页面源代码了解基本的使用方法安装与使用安装对象和 Simple Color Picker - 简单的颜色选择器 不使用Flash插件或是任何图片 无需任何依赖库 和Photoshop近似的体验 支持...
摘要:本文首发于我的博客在开发公司组件库的过程中,颜色组件由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。 本文首发于我的博客 在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇...
摘要:本文首发于我的博客在开发公司组件库的过程中,颜色组件由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。 本文首发于我的博客 在开发公司UI组件库的过程中,颜色组件ColorPicker由于时间关系没有去深入研究,看着花花绿绿的色谱图,以为实现起来会很复杂,就直接将一个开源的颜色选择器封装了一下。这大概是半年以前的事了,这篇...
摘要:值得庆幸的是,这三款预处理器语言的语法和语法都差不多。在这一节中,我们依次来对比一下这三款预处理器语言各种特性的异同之处,以及使用方法。预处理器语言支持任何变量例如颜色数值文本。 一、Sass、LESS和Stylus的语法 每一种语言都有自己一定的语法规则,CSS预处理器语言也不例外,在真正使用CSS预处器语言之前还有一个不可缺少的知识点,就是对语法的理解。值得庆幸的是,这三款CSS预...
阅读 1068·2021-11-24 10:24
阅读 2560·2021-11-22 13:54
阅读 946·2021-09-24 09:55
阅读 3571·2019-08-30 15:54
阅读 1288·2019-08-30 15:44
阅读 1067·2019-08-30 14:23
阅读 3179·2019-08-29 13:45
阅读 1201·2019-08-29 11:19