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

无障碍颜色选择器 - Coloris.js
栏目分类:其它   发布日期:2021-10-03   浏览次数:

Coloris.js 是一个原生 JavaScript 库,用于创建响应式、移动友好且完全可访问的颜色选择器。

更多功能:

  • 允许您预定义色样。

  • 黑暗和光明主题。

  • 支持 HEXa、HEX、RGBa、RGB 颜色格式。

  • 饱和度和亮度滑块。

使用:

1. 将样式表coloris.min.css和 JavaScriptcoloris.min.js导入 HTML 文档。

<link rel="stylesheet" href="coloris.min.css" />
<script src="coloris.min.js"></script>

2. 要自动初始化颜色选择器,只需将 data-coloris 属性添加到目标输入字段,如下所示:

<input type="text" data-coloris />

3. 或者在 JavaScript 中初始化颜色选择器。

<input type="text" class="coloris" />
Coloris({
  el: '.coloris'
});

4. 使用value属性指定初始颜色:

<input type="text" class="coloris" value="rgb(255, 0, 0)" />

5. 将主题更改为“黑暗”。

<input type="text" class="coloris" />
Coloris({
  theme: 'dark'
});

6. 定义一组要显示的预定义色板。

Coloris({
  swatches: [
    '#264653',
    '#2a9d8f',
    '#e9c46a',
    '#f4a261',
    '#e76f51',
    '#d62828',
    '#023e8a',
    '#0077b6',
    '#0096c7',
    '#00b4d8',
    '#48cae4',
  ]
});

7.设置颜色格式:

  • hex

  • RGB

  • mixed(默认)

Coloris({
  format: 'hex',
});

8. 更多配置。

Coloris({
  // 父容器
  parent: null,
  // 绑定的输入字段被包裹在一个 div 中,该 div 添加了一个显示当前颜色的缩略图
  // 和一个用于打开颜色选择器的按钮(仅适用于可访问性)
  wrap: true,
  // Margin in px
  margin: 2,
  a11y: {
    open: 'Open color picker',
    close: 'Close color picker',
    marker: 'Saturation: {s}. Brightness: {v}.',
    hueSlider: 'Hue slider',
    alphaSlider: 'Opacity slider',
    input: 'Color value field',
    swatch: 'Color swatch',
    instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.'
  }
});


官方网站:https://github.com/mdbassit/Coloris

相关热词: Coloris颜色选择器

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