color-picker-fork
v0.0.1
Published
A color picker component library
Downloads
7
Maintainers
Readme
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