Coloris 颜色选择器使用教程

Coloris 颜色选择器使用教程

ColorisA lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.项目地址:https://gitcode.com/gh_mirrors/co/Coloris

项目介绍

Coloris 是一个轻量级且优雅的 JavaScript 颜色选择器，使用 vanilla ES6 编写，无依赖项，支持可访问性。它可以将任何文本输入字段转换为颜色字段，具有以下特点：

• 零依赖
• 非常易于使用
• 可定制的主题和暗模式
• 支持透明度
• 颜色样本
• 多种颜色格式
• 触摸支持
• 完全可访问
• 适用于所有现代浏览器（不支持 IE）

项目快速启动

下载并添加脚本和样式

首先，下载最新版本的 Coloris，并将脚本和样式添加到你的页面中：

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

或者从 CDN 引入（不推荐用于生产环境）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>

添加颜色选择器

然后，只需在你的输入字段中添加 data-coloris 属性：

<input type="text" data-coloris>

这样就完成了！

应用案例和最佳实践

自定义颜色选择器

颜色选择器可以通过调用 Coloris() 并传递一个选项对象来进行配置。例如，激活暗模式并禁用透明度支持：

Coloris({
  themeMode: 'dark',
  alpha: false
});

颜色样本

你可以添加颜色样本：

Coloris({
  swatches: [
    '#264653',
    '#2a9d8f',
    '#e9c46a',
    'rgb(244, 162, 97)',
    '#e76f51',
    '#d62828',
    'navy',
    '#07b',
    '#0096c7',
    '#00b4d880',
    'rgba(0, 119, 182, 0.8)'
  ]
});

事件监听

你可以监听颜色选择器的事件：

document.querySelector('#mybutton').addEventListener('click', e => {
  Coloris({
    alpha: true
  });
});

典型生态项目

Coloris 是一个独立的颜色选择器项目，目前没有官方的生态项目。但是，你可以将其集成到任何需要颜色选择器的项目中，例如：

• 网页设计工具
• 图形编辑器
• 在线表单构建器

通过这些集成，你可以为用户提供一个直观且易于使用的颜色选择体验。

ColorisA lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.项目地址:https://gitcode.com/gh_mirrors/co/Coloris