BsColorPicker is a component that allow users to select a color using a variety of input methods.
Use the swatches property to display an array of color swatches that users can pick from.
<bs-color-picker> can be displayed as a popup dialog and use BsPopover internally.
| Property | Type | Default | Description |
|---|---|---|---|
| activator | Element/String | Display this ColorPicker as a popup dialog and calculate its display position from the activator element. Leave it undefined to display persistent/inline ColorPicker. | |
| container-color | String | 'white' | This ColorPicker container background color. Any of MDBootstrap Color variants and Material Color variants can be used. |
| cover | Boolean | false | Display ColorPicker at a position that covers the activator element. |
| hide-alpha | Boolean | false | Hide alpha slider and alpha input field. |
| hide-inputs | Boolean | false | Hide the input fields. |
| hide-mode-button | Boolean | false | Hide toggle mode buttons. |
| input-label-class | String/String[] | Optional css classname to apply to the input field label. | |
| mode v-model | String | This ColorPicker mode. Valid values: HEX, RGB, HSL. | |
| mode-button-color | String | 'grey' | Default the toggle mode button color style. Any of MDBootstrap Color variants and Material Color variants can be used. |
| mode-button-outlined | Boolean | false | Render the toggle mode buttons with outlined style. |
| mode-button-toggle-color | String | Color to apply to the active button. Any of MDBootstrap Color variants and Material Color variants can be used. | |
| model-value v-model | String | Monitored by v-model to maintain the component's value. | |
| open v-model | Boolean | false | This ColorPicker popup state: show or hide. Only works if activator element is defined. |
| placement | String | 'bottom-left' | This ColorPicker display placement when property activator is defined. |
| space | Number | Number of pixel to shift the ColorPicker display position from the activator element. | |
| swatches | String[] | Custom color swatches to display at the bottom ColorPicker. | |
| swatches-max-height | Number | 80 | Sets the maximum height of the swatches section. |
| transition | String | 'scale' | Transition animation when displaying the ColorPicker. This animation is effected by placement property. |
| Name | Arguments | Description |
|---|---|---|
| update:model-value | ( value:String) | Fired when this component's model-value is updated. |
| update:mode | ( value:String) | Fired when the mode property is updated. |
| update:open | ( value:Boolean) | Fired when the open property is updated. |
