1.1.9 • Published 21 days ago
@cyhnkckali/vue3-color-picker v1.1.9
Vue 3 Color Picker
A colour selective component for Vue 3. Fast and with small package size. Gradient and Solid in one! No dependency! Fully customisable!
Install
NPM Install
npm i @cyhnkckali/vue3-color-picker
Yarn Install
yarn add @cyhnkckali/vue3-color-picker
Import
Import where you want to use it
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
Import the style file into your main.js file
import '@cyhnkckali/vue3-color-picker/dist/style.css'
Use/Examples
<script setup>
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
</script>
<template>
<Vue3ColorPicker v-model="value" mode="solid" :showColorList="false" :showEyeDrop="false" type="RGBA"/>
<Vue3ColorPicker v-model="value" mode="gradient" :showColorList="false" :showEyeDrop="false"/>
</template>
Options
Parameter | Type | Description |
---|---|---|
v-model | string | default '' |
mode | string | solid or gradient default gradient |
theme | string | light or dark default light |
type | string | Return colour value type HEX8 RGBA RGB HEX default HEX8 |
inputType | string | Input type of colour values RGB HSL HSV CMYK default RGB |
disabled | boolean | default false |
local | object | default { angle: '', positionX: '', positionY: '' } |
colorListCount | number | Determines how many colours to keep in the colour list default 18 |
showColorList | boolean | default true |
showEyeDrop | boolean | default true Supports Chrome and Edge only |
showAlpha | boolean | default true |
showInputMenu | boolean | default true |
showInputSet | boolean | default true |
iconClasses | object | default { linear: '', radial: '', ruler: '', eyeDroper: '', inputMenu: '', save: '', delete: '' } |
CSS Colour Variables
Variables Name | Hex | Dark Hex |
---|---|---|
--cp-container-bg | #FFF | #212529 |
--cp-ps-color | #707070 | |
--cp-act-color | #5983fc | |
--cp-range-border | #f7f7f7 | |
--cp-input-menu-bg | #F5F5F5 | #242629 |
--cp-border-color | #e5e5e5 | #43474b |
--cp-range-shadow | #4c86f3 | |
--cp-label-color | #787878 | |
--cp-container-shadow | #58585881 | #2b262696 |
--cp-font-color | #141414 | #e7e7e7 |
--cp-button-color | #F5F5F5 | #1a1d20 |
Roadmap
- Widget type to add
1.1.9
21 days ago
1.1.8
27 days ago
1.1.7
29 days ago
1.1.6
30 days ago
1.1.5
1 month ago
1.1.4
1 month ago
1.1.3
1 month ago
1.1.2
2 months ago
1.1.1
5 months ago
1.1.0
5 months ago
1.0.0
5 months ago
0.9.9
5 months ago
0.1.9
5 months ago
0.1.8
5 months ago
0.1.7
5 months ago
0.1.6
5 months ago
0.1.5
5 months ago
0.1.4
5 months ago
0.1.3
5 months ago
0.1.2
5 months ago
0.1.1
5 months ago
0.1.0
5 months ago
0.0.9
5 months ago
0.0.8
5 months ago
0.0.7
5 months ago
0.0.6
5 months ago
0.0.5
5 months ago
0.0.4
5 months ago
0.0.3
5 months ago
0.0.2
5 months ago