当前位置:主页 > JavsScript库 > 其它 >

Flat RGB/HEX/HSV 颜色选择器
栏目分类:其它   发布日期:2021-09-16   浏览次数:

一个Flat风格、明暗主题的颜色选择器组件,支持 alpha 通道和 RGB、HEX 和 HSV 三种颜色格式。

使用:

1. 在文档中加载所需的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="src/css/color-picker.css" />
<script src="dist/color-picker.min.js"></script>

2. 创建一个容器来容纳颜色选择器。

<div class="example"></div>

3. 初始化颜色选择器并完成。

let color_pickers = [
    new ColorPickerControl({ container: document.querySelector('.example')}),
    // 更多实例...
];

4. 将主题更改为 Light。

new ColorPickerControl({ 
    container: document.querySelector('.example'),
    theme: 'light'
}),

5. 确定是否显示 alpha 通道滑块。默认值:true。

new ColorPickerControl({ 
    use_alpha: true
}),

6. 此示例显示如何将选定颜色应用于给定元素。

color_pickers.forEach(color_picker => {
  color_picker.on('change', function(color){
    document.getElementById("demo").style.setProperty('color', color.toHEX());
    document.getElementById("demo").style.setProperty('color', color.a / 255);
    color_pickers.filter(p=>p!=color_picker).forEach((p) => {
      p.color.fromHSVa(color.h, color.s, color.v, color.a);
      p.update(false);
    });
  });
});

7. 事件处理程序。

picker.on('init', (instance) => {
  console.log('Event: "init"', instance);
});
picker.on('open', (instance) => {
  console.log('Event: "open"', instance);
});
picker.on('change', (color) => {
  console.log('Event: "change"', color);
});
picker.on('close', (instance) => {
  console.log('Event: "close"', instance);
});


官方网站:https://github.com/ivanvmat/color-picker

相关热词: 颜色选择器

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库