Cordelia Vue - a VueJS plugin that allows you to add a rich color picker into your web pages

Last update: Aug 29, 2018

Related tags

Overview

Cordelia Vue

Cordelia Vue is a VueJS plugin that allows you to add a rich color picker into your web pages. See the documentation and demo for more information: https://cevadtokatli.github.io/cordelia-vue

NPM

npm install --save cordelia-vue

Installation

You can import the main Cordelia Component and render it.

import Vue from 'vue';
import Cordelia from 'cordelia-vue';

new Vue({
	el: '#picker',
    components: {Cordelia},
    render: h => h('Cordelia')
});

You can also add the script file into your html.

Put the CSS file in the head tag.

Settings

Option	Type	Default	Description
color	String	#FF0000	The picker's initial value.
colorFormat	String	hex	The format of the picker's value. Cordelia supports three types of formats: HEX, RGB and HSL. If the opacity is less than 1, HSL is automatically converted to HSLA, HEX and RGB are automatically converted to RGBA.
pickerStyle	Number	0	Cordelia comes with two style options. In the first style, the main box allows setting the saturation and lightness of the color and the second box allows setting the color; this is the default. In the second style, the main box allows setting the color and the second box allows setting the saturation and lightness. For more information please view the demo.
embed	Boolean	true	A boolean value that indicates whether the picker is shown when a button is clicked or embedded into the page directly. If it is false, a button is displayed that allows users to show the picker.
size	String	medium	The picker's size. Three options available Small, Medium, Large.
allowOpacity	Boolean	true	A boolean value that indicates whether the opacity bar is visible or not.
allowClearColor	Boolean	false	A boolean value that indicates whether the clear color button (an eraser icon that allows clearing selection) is visible or not.
showColorValue	Boolean	true	A boolean value that indicates whether the color value box is visible or not. Color value box allows you to set a color by typing its name or code. All of the CSS color formats are supported (HEX, RGB, RGBA, HSL, HSLA).
showButtons	Boolean	true	A boolean value that indicates whether the buttons are visible or not. If the `embed` property is false, the only way to close the picker is to click on the Save or Cancel button.
showPalette	Boolean	true	A boolean value that indicates whether the color table is visible or not. Color table allows you to show pre-defined colors. It is also possible for users to save colors for later use by adding this table.
paletteColors	String[]	#FFFFB5, #FBBD87, #F45151, #7AEA89, #91C8E7, #8EB4E6, #B0A7F1	An array that holds the name or codes of the colors that will be shown in the Color Table as default.
allowPaletteAddColor	Boolean	true	A boolean value that indicates whether users can add a color to the color table or not.

Callbacks

Callback	Description
onOpen	Fires when the picker is open.
onClose	Fires when the picker is closed.
onSave	Fires when the selection is saved.
onCancel	Fires when the picker is closed without being saved.
onChanged	Fires when the color is changed.

Methods

Method	Params	Return	Description
get		Object	Returns the current color.
set	newColor:String	void	Changes the current color.
show		void	Shows the picker.
hide		void	Hides the picker.
save		void	Saves the selection.
cancel		void	Cancels the selection.

IE Support

IE 10 is not supported and patches to fix problems will not be accepted.

License

Cordelia is provided under the MIT License.

Color picker Vue.js component

vue-colorpicker Color picker Vue.js component.

3 Jul 13, 2018

Vue color picker

Vue color picker Iro color picker for Vue. Demo See demo here Install npm install vue-iro-color-picker --save Usage import ColorPicker from 'vue-iro-

10 Sep 6, 2021

Color Picker app, created by tauri.

Color Picker 取色器 ✨ 特性一键取色并复制到剪贴板保留历史取色记录自定义颜色值类型（如：HEX, RGB 等）自定义取色快捷键（默认：F2）颜色值去重历史记录：左键单击显示颜色值，左键双击复制颜色值到剪贴板，右键单击删除颜色可隐藏界面取色软件安装包小，占用内存少 🌴

27 Sep 30, 2022

Color picker chrome-style only

one-colorpicker A Chrome-style ColorPicker Install $ npm install one-colorpicker Quick Start import {ColorPicker, ColorPanel} from 'one-colorpicker'

13 Sep 20, 2022

Color Picker base on Vue2.x

2 Nov 15, 2020

A Vue3.x based color picker component with gradient bar control.

a Vue3.x based color picker component. English | 中文 Features Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient. Suppor

7 Dec 3, 2022

Lightweight color shader/blender/converter plugin implemented for Vue 2.

Vue Color Blender/Shader/Converter Lightweight color shader/blender/converter plugin implemented for Vue 2. Disclaimer The algoritmn used in this plug