Color Input     

The Color component provides a method to input colors. There is also one more version available: Color Picker.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.
You might also want to check Color Utils.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QColor']
}

Basic Usage

<template>
  <q-color v-model="modelHex" />
</template>

<script>
export default {
  data: () => ({
    modelHex: '#C7044B',

    // and the other types of models:
    modelHexa: '#F0FF1CBF',
    modelRgb: { r: 112, g: 204, b: 55 },
    modelRgba: { r: 138, g: 36, b: 138, a: 64 }
  })
}

Vue Properties

Supports v-model which must be a String, Number or Date Object.

Vue PropertyTypeDescription
readonlyBooleanIf set to true, component is displayed as read-only.
display-valueStringText to display on input frame. Supersedes ‘placeholder’.
hide-underlineBooleanHides the bottom border.
popoverBooleanAlways display with a Popover, regardless of Platform.
modalBooleanAlways display with a Modal, regardless of Platform.
format-modelStringData type of model (useful especially when starting out with undefined or null). One of ‘auto’, ‘hex’, ‘rgb’, ‘hexa’, ‘rgba’.
placeholderStringPlaceholder text for input frame to use when model is not set (empty).
ok-labelStringText for the button to accept the input (when using Modal).
cancel-labelStringText for the button to cancel input with no change (when using Modal).
clearableBooleanIf used, the component offers the user an actionable icon to reset the current value to clear-value (if it is set) or otherwise default-value. The icon appears only when the current value matches clear-value/default-value.
default-valueString/ObjectDefault color for picker when model is not yet set.
clear-valueString/ObjectThe value to which to reset the field model to when using clearable, unless default-value is specified.

Common input frame properties:

PropertyTypeDescription
prefixStringA text that should be shown before the value of model.
suffixStringA text that should be shown after the value of model.
float-labelStringA text label that will “float” up above the input field, once the input field gets focus.
stack-labelStringA text label that will be shown above the input field and is static.
colorStringOne from Quasar Color Palette.
invertedBooleanInverted mode. Color is applied to background instead.
inverted-lightBooleanInverted mode with a light color. Color is applied to background instead.
darkBooleanIs component rendered on a dark background?
alignStringOne of ‘left’, ‘center’ or ‘right’ which determines the text align.
disableBooleanIf set to true, component is disabled and the user cannot change model.
warningBooleanIf set to true, the input fields colors are changed to show there is a warning.
errorBooleanIf set to true, the input fields colors are changed to show there is an error.
beforeArray of ObjectsIcon buttons on left side of input frame. Read below more details.
afterArray of ObjectsIcon buttons on right side of input frame. Read below more details.
no-parent-fieldBooleanAvoid trying to connect to a parent QField.

Lazy Input

Vue will soon supply the .lazy modifier for v-model on components too, but until then, you can use the longer equivalent form:

<q-color
  :value="model"
  @change="val => { model = val }"
/>

Icon buttons

This section refers to before and after properties which can add additional buttons as icons to the component. Here is the structure of the two properties:

{
  // required icon
  icon: String,
  // required function to call when
  // icon is clicked/tapped
  handler: Function,

  // Optional. Show icon button
  // if model has a value
  content: Boolean,

  // Optional. Show icon button
  // if model is marked with error
  error: Boolean
}

Examples:

<!--
  Show an icon button (with 'warning' as icon)
  when there is an error on component (through "error" prop)
-->
<q-color
  v-model="color"
  :error="error"
  :after="[
    {
      icon: 'warning',
      error: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

<!--
  Show an icon button (with 'arrow_forward' as icon)
  when the model has a non empty value
-->
<q-color
  v-model="color"
  :after="[
    {
      icon: 'arrow_forward',
      content: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

Vue Methods

Vue MethodDescription
show()Show Popover (on desktop) and Dialog (on mobile) to select date and/or time. Returns a Promise.
hide()Hide Popover (on desktop) and Dialog (on mobile) to select date and/or time and execute Function after it’s been hidden. Returns a Promise.
toggle()Toggle the Popover or Modal.
clear()Sets model to empty string (removes current value).

Vue Events

Vue EventDescription
@input(newVal)Triggered on immediate model value change.
@change(newVal)Triggered on lazy model value change.
@clear(clearVal)Triggered when the model is cleared.
@blurTriggered when the modal/ popup is closed.
@focusTriggered when the modal/ popup is opened.

More Examples

Coloring

Use the color and inverted/inverted-light props to control the color.

<q-color
  color="amber-7"
  float-label="Float Label"
  v-model="model"
/>

<q-color
  inverted
  color="primary"
  float-label="Float Label"
  v-model="model"
/>

Also, if QColor is displayed on a dark background, add the dark property.

<q-color dark color="secondary" />

Chips Input Color Picker
Last updated: Sat May 25 2019
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub