Color Picker

Color picker let the user select a color

Import

import { MpColorPicker } from '@mekari/pixel3'

Props

Events

Slots

Name	Type	Default
`id` Id of color picker.	`string`	-
`title` Title of color picker only for variant basic.	`string`	`Pick a color`
`value` Value of color picker in hex format.	`string`	`#3B82F6`
`placeholder` Placeholder of color picker input.	`string`	`3B82F6`
`variant` Variant of color picker.	`advance \| basic`	`advance`
`placement` Placement of popover.	`top \| right \| bottom \| left \| top-start \| top-end \| right-start \| right-end \| right-end \| bottom-start \| bottom-end \| left-start \| left-end`	`bottom`
`present` Preset of color picker in hex format.	`string`	`[ '#3B82F6', '#14B8A6', '#8B5CF6', '#F59E0B', '#EF4444', '#71717A', '#84CC16', '#EC4899', '#232933', '#60A5FA', '#2DD4BF', '#A78BFA', '#FBBF24', '#F87171', '#A1A1AA', '#A3E635', '#F472B6', '#FFFFFF' ]`
`is-show-popover` If true, color picker show popover by default.	`boolean`	`false`
`is-show-saturation` If true, color picker show saturation.	`boolean`	`true`
`is-show-hue` If true, color picker show hue.	`boolean`	`true`
`is-show-input` If true, color picker show input.	`boolean`	`true`
`is-show-preset` If true, color picker show preset.	`boolean`	`true`
`is-invalid` If true, color picker show invalid state.	`boolean`	`false`