JarCasting
Notice
Vue Swatches recently reached version 2. If you were using v1 please consider reading the release notes or you can check v1 here
Demo And Documentation
https://saintplay.github.io/vue-swatches/
Table of Contents
Introduction
Vue Swatches is a UI Component for Vue that allows the user to choose colors.
Unlike classic color pickers, where all colors are available (167 77 216 colors), Vue Swatches only shows a bunch of predefined colors.
More decisions require more effort
With fewer options, the user experience will be improved
Features
- Presets ready to use
- Built-in Popover
- Inline Mode
- Custom Colors
- Nested Colors Array
- Easily Customizable
- Custom Trigger
- Fallback Input
Install
npm install --save vue-swatches
or
yarn add vue-swatches
Basic Usage
<!-- Vue component -->
<template>
<div>
<v-swatches v-model="color"></v-swatches>
</div>
</template>
<script>
import VSwatches from 'vue-swatches'
// Import the styles too, globally
import "vue-swatches/dist/vue-swatches.css"
export default {
components: { VSwatches }, // window['vue-swatches'] - from CDN
data () {
return {
color: '#1CA085'
}
}
}
</script>
Contributing
# serve with hot reload at localhost:8080
yarn serve
# distribution build with minification
yarn build
# build the documentation into docs
npm docs:dev
# run unit tests
yarn test:unit
Browser Compatibility
This component has the same support than Vue itself
Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers.
However if you want to use this with IE9, you will probably need to work on the CSS styles. IE10 should be fine
Awesome Contributors
- Diego Jara (saintplay)
- Niko Nagy
- feel free to add yourself
License
MIT