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: 12 days ago
JSON representation
:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh
- Host: GitHub
- URL: https://github.com/xiaokaike/vue-color
- Owner: xiaokaike
- License: mit
- Created: 2016-04-22T09:02:18.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-01T06:29:53.000Z (almost 2 years ago)
- Last Synced: 2024-10-23T08:32:53.705Z (18 days ago)
- Topics: color-pickers, photoshop, vue, vue-color
- Language: Vue
- Homepage: https://xiaokaike.github.io/vue-color/
- Size: 8.37 MB
- Stars: 2,537
- Watchers: 20
- Forks: 355
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-color
README
# vue-color
[](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/)
## 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).