vcg

vue-color-gradient-picker

Color and gradient picker for vue.js

Showing:

Popularity

Downloads/wk

557

GitHub Stars

27

Maintenance

Last Commit

1mo ago

Contributors

3

Package

Dependencies

1

Size (min+gzip)

8.0KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial