vcs

vue-color-sketch

color picker, vue color, vue color sketch, vuejs

Showing:

Popularity

Downloads/wk

33

GitHub Stars

0

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

vue-color-sketch

npm

Color Pickers for Sketch with Vue.js(vue2.0).

Live demo

intro

Installation

NPM

$ npm install vue-color-sketch

CommonJS

var Sketch = require('vue-color/src/Sketch.vue');

new Vue({
  components: {
    'sketch': Sketch
  }
})

ES6

import { Sketch } from 'vue-color-sketch'

new Vue({
  components: {
    'sketch-picker': Sketch
  }
})

Browser globals

The dist folder contains vue-color.js and vue-color.min.js with all components exported in the window.VueColor object. These bundles are also available on NPM packages.

<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>
  var Sketch = VueColor.Sketch
</script>

Local setup

npm install
npm run dev

Usage


var colors = {
  hex: '#194d33',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
}
// or
var colors = '#194d33'
// or 
var colors = { h: 150, s: 0.66, v: 0.30 }
// or 
var colors = { r: 255, g: 0, b: 0 }
// etc...

new Vue({
  el: '#app',
  components: {
    'sketch-picker': sketch
  },
  data () {
    return {
      colors
    }
  }
})

colors accepts either a string of a hex color '#333' or a object of rgb or hsl values { r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }, whatever tinycolor2 accepts as an input.

<!-- suppose you have the data 'colors' in your component -->
<sketch-picker v-model="colors" />

OR

<sketch-picker :value="colors" @input="updateValue"></sketch-picker>

License

vue-color is licensed under The MIT License.

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