Vue Color Gradient Picker
Table of Contents
Installation
To install, you can use npm or yarn:
$ npm install vue-color-gradient-picker
$ yarn add 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" />
24 Jan 30, 2022
14 Sep 21, 2022
77 Dec 11, 2022
2.4k Dec 29, 2022
31 Dec 9, 2022
83 Dec 28, 2022
11 Nov 24, 2022
159 Dec 26, 2022
141 Jan 2, 2023
69 Dec 28, 2022
15 Jun 21, 2022
0 Feb 8, 2021
3 Jul 13, 2018
2 Aug 29, 2018
10 Sep 6, 2021
27 Sep 30, 2022
13 Sep 20, 2022
2 Nov 15, 2020
106 Dec 28, 2022