Vue Color Gradient Picker
Table of Contents
Installation
To install, you can use npm or yarn:
$ npm install @enp/vue-color-gradient-picker
$ yarn add @enp/vue-color-gradient-picker
Examples
Here is a simple examples of react-color-gradient-picker being used in an app:
Color Picker
<template>
<div id="app">
<ColorPicker
:color="color"
:onStartChange="color => onChange(color, 'start')"
:onChange="color => onChange(color, 'change')"
:onEndChange="color => onChange(color, 'end')"
/>
</div>
</template>
<script>
import { ColorPicker } from 'vue-color-gradient-picker';
export default {
name: 'App',
components: {
ColorPicker
},
data() {
return {
color: {
red: 255,
green: 0,
blue: 0,
alpha: 1
}
}
},
methods: {
onChange(attrs, name) {
this.color = { ...attrs };
}
}
}
</script>
<style src="vue-color-gradient-picker/dist/index.css" lang="css" />Gradient Color Picker
<template>
<div id="app">
<ColorPicker
:gradient="gradient"
:isGradient="true"
:onStartChange="color => onChange(color, 'start')"
:onChange="color => onChange(color, 'change')"
:onEndChange="color => onChange(color, 'end')"
/>
</div>
</template>
<script>
import { ColorPicker } from 'vue-color-gradient-picker';
export default {
name: 'App',
components: {
ColorPicker
},
data() {
return {
gradient: {
type: 'linear',
degree: 0,
points: [
{
left: 0,
red: 0,
green: 0,
blue: 0,
alpha: 1
},
{
left: 100,
red: 255,
green: 0,
blue: 0,
alpha: 1
}
]
}
}
},
methods: {
onChange(attrs, name) {
console.log(name);
}
}
}
</script>
<style src="vue-color-gradient-picker/dist/index.css" lang="css" />