Color pickers
The v-color-picker
allows you to select a color using a variety of input methods.
Usage
API
Component | Description |
---|---|
v-color-picker | Primary component |
Examples
Props
Customizing the look of the picker
There are a number of props available to help you customize the component by hiding or showing the various parts of the picker. You can independently hide the canvas, the sliders, and the inputs. You can also show a collection of swatches.
Elevation
Adjust the elevation of the v-color-picker
component using the elevation or flat prop. The flat is equivalent to setting elevation to 0.
Mode
You can specify which input modes are available to your users with the modes
prop. If you only set a single mode, then the mode toggle will automatically be hidden. You can also control the current mode with the mode
v-model.
Model
The v-color-picker
uses the v-model
prop to control the color displayed. It supports hex strings such as #FF00FF and #FF00FF00, and objects representing RGBA, HSLA and HSVA values. The component will try to emit the color in the same format that was provided. If the value is null, then the v-color-picker
will default to emitting hex colors.
Swatches
Using the show-swatches
prop you can display an array of color swatches that users can pick from. It is also possible to customize what colors are shown using the swatches
prop. This prop accepts a two-dimensional array, where the first dimension defines a column, and second dimension defines the swatches from top to bottom by providing rgba hex strings. You can also set the max height of the swatches section with the swatches-max-height
prop.