Ui.ColorPanel

A color panel allows you to pick a color in HSV color space, where the hue is a vertical slider, the saturation and value is a square input and the alpha is a horizontal slider.

Interactive Demo

You can play around with a Ui.ColorPanel below using the controls.

HEX
H
S
V
A
Size (16px)
Value
#000000FF
Embeeded
<Ui.ColorPanel
value={Color::HEX("000000FF")}
size={Ui.Size.Px(16)}
embedded={false}/>
Value

The color can be controlled with the value property:

HEX
H
S
V
A
HEX
H
S
V
A
HEX
H
S
V
A
<>
<Ui.ColorPanel value={Color.HEX("FF0000FF")}/>
<Ui.ColorPanel value={Color.HEX("00FF00FF")}/>
<Ui.ColorPanel value={Color.HEX("0000FFFF")}/>
</>
Size

The size of the component can be set with the size property.

HEX
H
S
V
A
HEX
H
S
V
A
HEX
H
S
V
A
<>
<Ui.ColorPanel size={Ui.Size.Px(8)}/>
<Ui.ColorPanel size={Ui.Size.Px(12)}/>
<Ui.ColorPanel size={Ui.Size.Px(16)}/>
</>
Embedded

The control can be embedded by setting embedded property to true

This will remove the border and make the padding smaller. It's mainly used to embed the panel into a picker.

HEX
H
S
V
A
HEX
H
S
V
A
<>
<Ui.ColorPanel embedded={false}/>
<Ui.ColorPanel embedded={true}/>
</>
Change Event

The panel emits a change event when the user manipulates the panel using the onChange property.

HEX
H
S
V
A
<Ui.ColorPanel
onChange={
Function.debounce1(
(color : Color) {
let colorString =
Color.toCSSHex(color)
let content =
<>"Color changed to: #{colorString}"</>
Ui.Notifications.notifyDefault(content)
}, 200)
}
/>
End Event

The panel emits an end event when the use stops manipulating the panel using onEnd property.

HEX
H
S
V
A
<Ui.ColorPanel
onEnd={() { Ui.Notifications.notifyDefault(<>"Manipulation ended!"</>) }}
/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.