vue-accessible-color-picker
A color picker component for Vue.js.
- Package: npmjs.com/package/vue-accessible-color-picker
- Repository: github.com/kleinfreund/vue-accessible-color-picker
Demo
Installation
npm install vue-accessible-color-picker
Usage
In a Vue single file component, import the ColorPicker
component and its styles.
<template>
<ColorPicker />
</template>
<script setup>
import { ColorPicker } from 'vue-accessible-color-picker'
</script>
<style>
@import url('vue-accessible-color-picker/styles');
</style>
You can also register the component and import the styles globally.
Template and styles used for the demo above
Template:
<ColorPicker
:color="{
h: 320,
s: 100,
l: 50,
a: 0.8
}"
>
<template #hue-range-input-label>
<span class="visually-hidden">Hue</span>
</template>
<template #alpha-range-input-label>
<span class="visually-hidden">Alpha</span>
</template>
</ColorPicker>
Styles:
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
white-space: nowrap;
}
Made with love by Philipp.