Accessible Color Picker Component For Vue

Description:

An easy and accessible color picker component that supports ‘hex’, ‘hsl’, ‘hwb’, and ‘rgb’ foramts.

How to use it:

1. Import the component.

import { ColorPicker } from 'vue-accessible-color-picker';

2. Register the color picker component.

.export default {
  components: {
    ColorPicker,
  }
}

3. Or import and register the component globally.

import { ColorPickerPlugin } from 'vue-accessible-color-picker';
Vue.component('ColorPickerPlugin', ColorPickerPlugin)

4. Create a default color picker component.

<template>
  <ColorPicker />
</template>

5. Default props.

color: {
  type: [String, Object],
  required: false,
  default: null,
},
id: {
  type: String,
  required: false,
  default: 'color-picker',
},
visibleFormats: {
  type: Array,
  required: false,
  default: () => ['hex', 'hsl', 'hwb', 'rgb'],
  validator (visibleFormats) {
    return visibleFormats.length > 0 && visibleFormats.every(format => ALLOWED_VISIBLE_FORMATS.includes(format))
  },
},

Preview:

Accessible Color Picker Component For Vue

Changelog:

v2.0.0 (01/17/2021)

  • migrate to Vue.js version 3

v1.1.2 (12/20/2020)

  • Bug Fixes

v1.1.0 (12/20/2020)

  • add basic type definitions

10/31/2020

  • chore: remove unnecessary v-if directive

Download Details:

Author: kleinfreund

Live Demo: https://vue-accessible-color-picker.netlify.app/

Download Link: https://github.com/kleinfreund/vue-accessible-color-picker/archive/main.zip

Official Website: https://github.com/kleinfreund/vue-accessible-color-picker

Install & Download:

# Yarn
$ yarn add vue-accessible-color-picker

# NPM
$ npm i vue-accessible-color-picker --save

You Might Be Interested In:

Add Comment