On this page

NcColorPicker

Props

Prop name	Description	Type	Values	Default
modelValue	A HEX color that represents the initial value of the picker	string	-
advancedFields	Set to `true` to enable advanced fields including HEX, RGB, and HSL	boolean	-	false
palette	Provide a custom array of hexadecimal colors to show	array	-	() => GenColors(4).map(color => { return '#' + rgbToHex(color.r) + rgbToHex(color.g) + rgbToHex(color.b) })

Events

Event name	Properties	Description
submit		Emits a hexadecimal string e.g. '#ffffff'
close		Emitted after picker close
update:open
update:modelValue		Emits a hexadecimal string e.g. '#ffffff'
input		Emits a hexadecimal string e.g. '#ffffff'

Slots

Name	Description	Bindings
default

As this component is based on the NcPopover component, it also inherits all props and events from it.

General description

This component allows the user to choose a color. It consists of 2 actual pickers:

One simple picker with a predefined palette of colors;
One more advanced picker that provides the full color spectrum;

Usage

Using v-model and passing in an HTML element that will be treated as a trigger:

loading...

Using v-model for both color and open state and emitting an event that updates the color

loading...

Using advanced fields including HEX, RGB, and HSL:

loading...