<dy-color-picker>
A color selection component that provides a user-friendly interface for choosing colors. It supports both RGB and alpha channel selection, and includes an eyedropper tool for picking colors from the screen when available.
<dy-color-picker> Example
Loading...
<dy-color-picker .value=${"#418eec"} .disabled=${true}></dy-color-picker> <dy-color-picker
.alpha=${true}
.value=${"#e5e"}
@change=${(evt) => evt.target.value = evt.detail}></dy-color-picker>
<dy-color-picker> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
value(value) |
Yes | HexColor |
alpha(alpha) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
change |
Emitter<HexColor> |
Instance Methods
| Method | Type |
|---|---|
showPicker |
() => void |
Other
| Type | Value |
|---|---|
| Event | change |
<dy-color-panel> Example
Loading...
<dy-color-panel
.alpha=${true}
.value=${"#e5e"}
@change=${(evt) => evt.target.value = evt.detail}></dy-color-panel>
<dy-color-panel> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
value(value) |
Yes | HexColor |
alpha(alpha) |
Yes | boolean |
change |
Emitter<HexColor> |
Other
| Type | Value |
|---|---|
| Event | change |