ColorPicker

Components · interactive

A colour picker: a saturation/value square, a hue rail and an alpha rail.

Import

#include "gbui/widgets/colorPicker.hpp"

Example

ColorPicker

colorPicker · Components · interactive

Nothing is downloaded until you press it.

ColorPickerResult colorPicker(Ui& ui, const Interaction& input, std::string_view id, ColorPickerState& state, const ColorPickerOptions& options = {});

Draws the picker and edits state in place. The square is built the way every picker on the web is: the pure hue behind, a white-to-transparent gradient across it and a transparent-to-black gradient down it. Two gradients over a fill is a two-dimensional ramp, and it costs three nodes rather than a per-pixel shader the painter does not have.

ColorField

colorField · Components · interactive

Nothing is downloaded until you press it.

ColorPickerResult colorField(Ui& ui, const Interaction& input, std::string_view id, ColorPickerState& state, const ColorFieldOptions& options = {});

The same picker behind a swatch, opened in a popover. Two entry points rather than a flag, because they are two different components in every way that matters: the inline one is always open and owns its space, and this one is a control in a form that borrows space when asked. They share the state and the drawing, which is the part worth sharing. The application owns whether it is open, as it does for every other overlay here — state.open is a plain bool it can set, restore or ignore.

API

ColorPickerOptions

Option	Type	Default	What it does
alpha	bool	true	The alpha rail and the alpha in the readout. Off for a picker choosing a theme token, where a translucent colour is not a valid answer.
hue	bool	true	The hue rail. Off leaves a picker that only shades one hue, which is what a "tint of the accent" control wants.
showHex	bool	true	The #rrggbb readout under the rails.
swatches	std::vector<Color>		A row of fixed swatches under everything else. Empty draws none.
width	float	240.0f
squareHeight	float	150.0f
railHeight	float	14.0f
gap	float	10.0f
name	std::string_view		What colour this is of — "Accent", "Series 3". The value announces itself as a hex code; only the caller knows what it colours.

ColorFieldOptions

Option	Type	Default	What it does
height	float	28.0f	The trigger's own size. The popover takes width from the picker options above, as everything else does.
showHexOnTrigger	bool	true	The hex code beside the swatch on the closed control. Off leaves the swatch alone, which is what a trigger in a tight toolbar wants.
disabled	bool	false
dismissOnOutsideClick	bool	true	A press anywhere else closes it. On, because a popup that outlives the attention that opened it is a popup the reader has to dismiss on purpose. Off keeps it open until the application says otherwise — which is what a picker being dragged from inside a dialog wants, where the click outside belongs to the dialog.
dismissOnEscape	bool	true	Escape closes it. Separate from the above: a caller may want the key without the click, and a modal that owns Escape may want neither.