Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/xiaokaike/vue-color

:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh
https://github.com/xiaokaike/vue-color

color-pickers photoshop vue vue-color

Last synced: 2 months ago
JSON representation

:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh

Lists

README 

        
# vue-color 



[![npm](https://img.shields.io/npm/v/vue-color.svg)](https://www.npmjs.com/package/vue-color)



Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).  



## [Live demo](http://xiaokaike.github.io/vue-color/)



![intro](./intro.png)



## Installation



### NPM

```bash

$ npm install vue-color

```



### CommonJS

```js

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



new Vue({

  components: {

    'Photoshop': Photoshop

  }

})

```



### ES6

```js

import { Photoshop } from 'vue-color'



new Vue({

  components: {

    'photoshop-picker': Photoshop

  }

})

```



### 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.



```html



  var Photoshop = VueColor.Photoshop



```



## Local setup



```

npm install

npm run dev

```



## Usage



```js



var colors = {

  hex: '#194d33',

  hex8: '#194D33A8',

  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 = '#194D33A8'

// 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: {

    'material-picker': material,

    'compact-picker': compact,

    'swatches-picker': swatches,

    'slider-picker': slider,

    'sketch-picker': sketch,

    'chrome-picker': chrome,

    'photoshop-picker': photoshop

  },

  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](https://www.npmjs.com/package/tinycolor2) accepts as an input.



```html



```



OR



```html



```



In some cases you can give the component a predefined set of colors with the property `presetColors` (for `Sketch` only) or `palette` (for `Compact` and `Grayscale`), by simply passing it an array with the color values as strings in any css compatible format.



```html



```



## License



vue-color is licensed under [The MIT License](LICENSE).