ColorPicker
Color picker is an input field for colors selection. Clicking it opens up a panel with color paletтes. The user can select a hue from the hue map and after that to select a current color from the palette. The user can use the eyedropper to select any color from the page. The user can see the color hex and rgb codes of the color and also to change them from the inputs.
Basic Usage
<triton-color-picker></triton-color-picker>
<TritonColorPicker/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-color-picker></triton-color-picker>
</body>
</html>
Behavior
Initial Color
Use the initial color prperty to set the color which is selected when the Color Picker loads. Only a valid color can be passed.
<triton-color-picker initialColor="#2020E8"></triton-color-picker>
Appearance
Colorpicker label
Use the label prperty to display a label above the color picker
<triton-color-picker label="This is a colorpicker"></triton-color-picker>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
disabled | If true, the component will look disabled and not be interactable | boolean | false |
error | If true the input element will be displayed as invalid | boolean | false |
error-text | Error text displayed at the bottom of the field, if error is true | string | - |
format | Set the color value response type | hex hsl hsv rgb | 'hex' |
helper-text | A brief text for the user, at the bottom of the field | string | - |
initial-color | Set the initial color of the colorpicker | string | '#ffffff' |
label | Set the label of the colorpicker | string | - |
placement | Set the position the dropdown will open in, relative to the context element | bottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight | 'bottomLeft' |
required | If true, the user must fill in a value before submitting a form | boolean | false |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
value | The value of the color picker | string | - |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atBlur | CustomEvent<void> | Emitted when the input loses focus. | - |
| atChange | CustomEvent<string> | Emitted when the value has changed. | - |
| atFocus | CustomEvent<void> | Emitted when the input has focus. | - |
| atInput | CustomEvent<KeyboardEvent> | Emitted when a keyboard input occurred. | - |