Help the user pick colors with a Vue.js component

vue-swatches

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.

Demo Page

Features

  • Presets ready to use
  • Popover Mode
  • Inline Mode
  • Custom Colors
  • Nested Colors Array
  • Easily Customizable
  • Custom Trigger

Example

npm install --save vue-swatches

or

yarn add vue-swatches

Usage

Defining the basic material colors (material-basic) which is a basic collection of material colors, made available through the component.


<template>
  <div>
    <swatches v-model="color"  colors="text-advanced"/>
  </div>
</template>

<script>
  import Swatches from 'vue-swatches'
  import "vue-multiselect/dist/vue-multiselect.min.css"

  export default {
    components: { Swatches },
    data () {
      return {
        color: '#1CA085'
      }
    }
  }
</script>

You can visit the API page to see all the available props, events and slots.

This project is open-source under an MIT License.