WEB前端工具推薦丨分享6個(gè)熱門顏色選擇器組件

對(duì)于前端開(kāi)發(fā)初學(xué)者而言，顏色選擇器可能比較陌生，甚至在實(shí)際項(xiàng)目中都未曾使用過(guò)。但如果開(kāi)發(fā)高端一點(diǎn)的網(wǎng)站的話，通常需要自定義主題功能，可以自定義導(dǎo)航欄、菜單欄的文本顏色、背景色之類的，此時(shí)就用到顏色選擇器了。

今天w3cschool編程獅為大家推薦幾個(gè) Github 上熱門的顏色選擇器組件。

一、Colorjoe

colorjoe 是一個(gè)具有觸控和 AMD 支持的可擴(kuò)展顏色選擇器。可以通過(guò) CSS 定義其實(shí)際尺寸和布局。通過(guò)這種方式，該組件非常適合響應(yīng)式布局。

與那里的許多其他顏色選擇器不同，colorjoe 是真正可擴(kuò)展的。它基于 CSS，不依賴于外部圖像。因此，您可以調(diào)整其大小以適應(yīng)您的目的。還支持觸控和 AMD 模塊定義。

colorjoe 受到 ColorJack 和 RightJS Colorpicker 的啟發(fā)。與那些不同的是，它實(shí)際上可以很好地?cái)U(kuò)展。從本質(zhì)上講，這意味著您將能夠使用一些 CSS 定義其實(shí)際尺寸和布局。通過(guò)這種方式，小部件非常適合響應(yīng)式布局。

此外，由于它提供的簡(jiǎn)單 API，實(shí)現(xiàn)缺失的功能（RGB 字段等）相對(duì)容易。

• 項(xiàng)目地址：https://github.com/bebraw/colorjoe

安裝

npm i colorjoe

如果您更喜歡獨(dú)立的 dist，請(qǐng)將預(yù)打包的dist/colorjoe.js和添加css/colorjoe.css到您的頁(yè)面或從 src/使用 AMD 。

用法

const joe = colorjoe.rgb(element_id_or_dom_object, initial_color_value, extras);

或者

const joe = colorjoe.hsl(element_id_or_dom_object, initial_color_value, extras);

二、 Colorful

今天，每個(gè)依賴項(xiàng)都會(huì)拖累更多的依賴項(xiàng)，并且無(wú)法控制地增加項(xiàng)目的包大小。但是大小對(duì)于打算在瀏覽器中工作的所有內(nèi)容都非常重要。React Colorful 是一個(gè)用于 React 和 Preact 應(yīng)用程序的小型顏色選擇器組件，使用 hooks 和函數(shù)組件構(gòu)建。它使用嚴(yán)格的 TypeScript 編寫(xiě)，具有 100% 的測(cè)試覆蓋率，界面簡(jiǎn)單易用，適用于大多數(shù)瀏覽器，支持移動(dòng)設(shè)備和觸摸屏遵循 WAI-ARIA 指南以支持輔助技術(shù)的用戶，壓縮后僅 2,8 KB（比 react-color 輕小13 倍）。react-colorful 是一個(gè)簡(jiǎn)單的顏色選擇器，適合那些關(guān)心包大小和客戶端性能的人。。

• 項(xiàng)目地址：https://github.com/omgovich/react-colorful

安裝

npm install react-colorful

import { HexColorPicker } from "react-colorful";


const YourComponent = () => {
  const [color, setColor] = useState("#aabbcc");
  return <HexColorPicker color={color} onChange={setColor} />;
};

支持的顏色模型

我們?yōu)椴煌念伾Ｐ吞峁┝?12 個(gè)額外的顏色選擇器組件，除非您的應(yīng)用程序需要 HEX 字符串作為輸入/輸出格式。

可用的選擇器

Import	Value example
{ HexColorPicker }	"#ffffff"
{ RgbColorPicker }	{ r: 255, g: 255, b: 255 }
{ RgbaColorPicker }	{ r: 255, g: 255, b: 255, a: 1 }
{ RgbStringColorPicker }	"rgb(255, 255, 255)"
{ RgbaStringColorPicker }	"rgba(255, 255, 255, 1)"
{ HslColorPicker }	{ h: 0, s: 0, l: 100 }
{ HslaColorPicker }	{ h: 0, s: 0, l: 100, a: 1 }
{ HslStringColorPicker }	"hsl(0, 0%, 100%)"
{ HslaStringColorPicker }	"hsla(0, 0%, 100%, 1)"
{ HsvColorPicker }	{ h: 0, s: 0, v: 100 }
{ HsvaColorPicker }	{ h: 0, s: 0, v: 100, a: 1 }
{ HsvStringColorPicker }	"hsv(0, 0%, 100%)"
{ HsvaStringColorPicker }	"hsva(0, 0%, 100%, 1)"

代碼示例

import { RgbColorPicker } from "react-colorful";


const YourComponent = () => {
  const [color, setColor] = useState({ r: 50, g: 100, b: 150 });
  return <RgbColorPicker color={color} onChange={setColor} />;
};

三、Huebee

Huebee 是一個(gè) JavaScript 庫(kù)，用于創(chuàng)建以用戶為中心的顏色選擇器。Huebee 顯示一組有限的顏色，因此用戶可以一目了然地查看所有顏色，做出明確的決定，并通過(guò)單擊選擇一種顏色。

• 項(xiàng)目地址：https://github.com/metafizzy/huebee

使用 npm 安裝：npm install huebee

使用 Bower 安裝：bower install huebee --save

在您的站點(diǎn)中包含 Huebee.css和.js文件。

<link rel="stylesheet" href="/path/to/huebee.css" media="screen">
<script src="/path/to/huebee.pkgd.min.js"></script>

Huebee 在錨元素上工作。

<!-- use inputs so users can set colors with text -->
<input class="color-input" value="#F80" />


<!-- anchors can be buttons -->
<button class="color-button">Select color</button>


<!-- anchors can be any element -->
<span class="current-color">Current color</span>

四、React Color

React Color 提供了 13 種不同的顏色選擇器，可以模擬流行網(wǎng)站和應(yīng)用程序（如 GitHub、Photoshop、Chrome 和 Twitter）的 UI。不僅如此，還可以使用不同的組件來(lái)創(chuàng)建自定義顏色選擇器。

• 項(xiàng)目地址：https://github.com/casesandberg/react-color

安裝和使用

npm install react-color --save

包含組件

import React from 'react'
import { SketchPicker } from 'react-color'


class Component extends React.Component {


  render() {
    return <SketchPicker />
  }
}

可以分別導(dǎo)入：AlphaPicker BlockPicker ChromePicker CirclePicker CompactPicker GithubPicker HuePicker MaterialPicker PhotoshopPicker SketchPicker SliderPicker SwatchesPicker TwitterPicker。

通過(guò)ReactCSS 實(shí)現(xiàn)100% 內(nèi)聯(lián)樣式

五、Vue Color

Vue Color 是一個(gè)適用于 Sketch、Photoshop、Chrome 等的 Vue (Vue2.0)顏色選擇器。

• 項(xiàng)目地址：https://github.com/xiaokaike/vue-color

安裝

NPM

$ npm install vue-color

CommonJS

var Photoshop = require('vue-color/src/Photoshop.vue');


new Vue({
  components: {
    'Photoshop': Photoshop
  }
})

ES6

import { Photoshop } from 'vue-color'


new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

瀏覽器全局變量

該dist文件夾包含對(duì)象vue-color.js中vue-color.min.js導(dǎo)出的所有組件。window.VueColor這些包也可用于 NPM 包。

<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>
  var Photoshop = VueColor.Photoshop
</script>

本地設(shè)置

npm install
npm run dev

六、iro.js

iro.js 是一個(gè)用于 JavaScript 的模塊化、注重設(shè)計(jì)的顏色顏色選擇器組件 - 支持多種顏色格式。所有 iro.js 都可以從單個(gè)腳本運(yùn)行 - 不需要額外的 CSS、圖像或第三方庫(kù)！

• 項(xiàng)目地址：https://github.com/jaames/iro.js

安裝

使用 NPM 安裝

npm install @jaames/iro --save

如果您使用的是 Webpack 或 Rollup 之類的模塊打包器，請(qǐng)將 iro.js 導(dǎo)入您的項(xiàng)目：

// Using ES6 module syntax
import iro from '@jaames/iro';


// Using CommonJS modules
const iro = require('@jaames/iro');

使用 jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>

當(dāng)您像這樣手動(dòng)包含庫(kù)時(shí)，iro.js 將在 window.iro 上全局可用。

下載并托管自己

< html > 
  < head > 
    <!-- ... --> 
    < script  src =" ./path/to/ iro.min.js " > </ script > 
  </ head > 
  <!-- ... - -> 
</ html >

以上就是小師妹為你推薦的6個(gè)熱門顏色選擇器組件了，關(guān)注w3cschool編程獅收獲更多技術(shù)干貨~