vue-color-gradient-picker
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" />
Demo
Dependencies
Dependencies
@rollup/plugin-alias: ^3.1.0@rollup/plugin-buble: ^0.21.3@rollup/plugin-commonjs: ^12.0.0@rollup/plugin-json: ^4.0.3@rollup/plugin-multi-entry: ^3.0.1@rollup/plugin-node-resolve: ^8.0.0@vue/cli-plugin-babel: ~4.3.0@vue/cli-plugin-eslint: ~4.3.0@vue/cli-service: ~4.3.0babel-eslint: ^10.1.0core-js: ^3.6.4eslint: ^6.7.2eslint-plugin-vue: ^6.2.2gh-pages: ^2.2.0node-sass: ^4.14.1rollup: ^2.10.5rollup-plugin-copy-assets: ^2.0.1rollup-plugin-includepaths: ^0.2.3rollup-plugin-scss: ^2.5.0rollup-plugin-terser: ^5.3.0rollup-plugin-vue: ^5.1.9sass-loader: ^8.0.2style-loader: ^1.2.1vue: ^2.6.11vue-template-compiler: ^2.6.11