https://github.com/saintplay/vue-swatches

:art: Help the user picking beautiful colors!
https://github.com/saintplay/vue-swatches

color-palette color-picker component swatches ui-components vue vue-components vuejs vuejs-components vuejs2

Last synced: about 1 month ago
JSON representation

:art: Help the user picking beautiful colors!

• Host: GitHub
• URL: https://github.com/saintplay/vue-swatches
• Owner: saintplay
• License: mit
• Created: 2017-12-24T04:37:10.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-06-29T18:15:21.000Z (over 3 years ago)
• Last Synced: 2024-05-17T19:43:53.063Z (6 months ago)
• Topics: color-palette, color-picker, component, swatches, ui-components, vue, vue-components, vuejs, vuejs-components, vuejs2
• Language: JavaScript
• Homepage: https://saintplay.github.io/vue-swatches/
• Size: 1.48 MB
• Stars: 565
• Watchers: 7
• Forks: 58
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


  

    

  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



## **Notice**

Vue Swatches recently reached **version 2**. If you were using v1 please consider reading the [release notes](https://github.com/saintplay/vue-swatches/releases/tag/v2.0.0) or you can check v1 [here](https://github.com/saintplay/vue-swatches/tree/v1.x)

## Demo And Documentation ##

## Table of Contents ##

- [Introduction](#introduction)

- [Features](#features)

- [Install](#install)

- [Basic Usage](#basic-usage)

- [Contributing](#contributing)

- [Browser Compatibility](#browser-compatibility)

- [License](#license)

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

  


    

  


  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'

      }

    }

  }

```

## Contributing ##

``` bash

# 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](https://caniuse.com/#feat=es5).

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)](https://github.com/saintplay/)

- [Niko Nagy](https://github.com/NikoNagy)

- *feel free to add yourself*

## License

MIT