Components

Color pickers are composed of 7 components:

• vuestic-color-picker-input
• vuestic-simple-palette-picker
• vuestic-color-input
• vuestic-advanced-color-picker
• vuestic-slider-color-picker
• vuestic-color-square
• vuestic-color-dot
  Let's break them apart:

vuestic-color-picker-input

  <vuestic-color-picker-input v-model="value" mode="palette" :palette="palette">
    <color-dot :color="value"/>
  </vuestic-color-picker-input>

This component provides 3 modes:

• Advanced
• Palette

• Slider
  vuestic-color-input component passed default through the slot with palette mode.When colors are provided - input is disabled.Slots are allowed to switch color-input for something else, for example color-square.Picker is shown in dropdown.

• v-model: String — Color string

• mode: String — Picker mode

vuestic-simple-palette-picker

  <vuestic-simple-palette-picker
        v-model="value"
        :palette="palette"
      />

Colors are passed through array. For each color in array component creates color-dot component

• v-model: String — Color string
• palette: Array — Palette of colors

vuestic-color-input

  <vuestic-color-input v-model="value"/>

Consists of of input and vuestic-color-dot.Input could be disabled.

  <vuestic-color-input v-model="value" disabled/>

Dot could be selected.

  <vuestic-color-input v-model="value" selected/>

• v-model: String — Color string
• selected: Boolean — selected/unselected dot
• disabled: Boolean — enabled/disabled input

vuestic-advanced-color-picker

  <vuestic-advanced-color-picker v-model="value"/>

• v-model: String — Color string

vuestic-slider-color-picker

  <vuestic-slider-color-picker v-model="value"/>

• v-model: String — Color string

vuestic-color-square

  <vuestic-color-square :value="value"/>

• v-model: String — Color string

vuestic-color-dot

<color-dot
        color="#value"
        :selected="selected"
      />

• v-model: String — Color string
• selected:Boolean — selected/unselected dot
  Find DEMOs here!