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" />