VuetifyColorInput

A color input component for Vuetify.

demo

Try it out!

dependencies

• chroma.js

setup

npm

npm i vuetify-color-input

import VuetifyColorInput from 'vuetify-color-input';

Use the treeshaking system.

import VuetifyColorInput from 'vuetify-color-input/a-la-carte';

browser

<link
  href="https://unpkg.com/vuetify@2/dist/vuetify.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vuetify@2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/chroma-js@2"></script>
<script src="https://unpkg.com/vuetify-color-input"></script>

The component is globally available as VuetifyColorInput. If Vue is detected, the component is registered automatically.

usage

Register the component globally.

import Vue from 'vue';
import VColorInput from 'vuetify-color-input';

Vue.component(VColorInput.name, VColorInput);

or

Register the component locally.

import VColorInput from 'vuetify-color-input';

export default {
  components: {
    VColorInput,
  },
  // ...
};

Use the component inside a template.

<v-color-input
  v-model="backgroundColor"
  label="background color"
/>

properties

| name | type | default | description | | ---: | :--- | :--- | :--- | | noAlpha | Boolean | false | Removes alpha. |

Inherits from v-input:

• appendIcon
• disabled
• error
• errorCount
• errorMessages
• hideDetails
• hint
• id
• label
• messages
• persistentHint
• prependIcon
• rules
• success
• successMessages
• validateOnBlur

Inherits from v-color-picker:

• canvasHeight
• dotSize
• hideCanvas
• hideInputs
• hideModeSwitch
• hideSliders
• mode
• showSwatches
• swatches
• swatchesMaxHeight
• value

slots

Inherits from v-input:

• append
• label
• message
• prepend

events

Inherits from v-input:

• click:append
• click:prepend
• update:error

Inherits from v-color-picker:

• input