ui/color_picker

Types

ColorMode

Color mode for keyboard navigation

pub type ColorMode {
  Hue
  Saturation
  Lightness
}

Constructors

```
Hue
```
```
Saturation
```
```
Lightness
```

Msg

</>

Messages for color picker keyboard navigation

pub type Msg {
  HueIncrease
  HueDecrease
  SaturationIncrease
  SaturationDecrease
  LightnessIncrease
  LightnessDecrease
  HueMin
  HueMax
  SaturationMin
  SaturationMax
  LightnessMin
  LightnessMax
}

Constructors

```
HueIncrease
```
```
HueDecrease
```
```
SaturationIncrease
```
```
SaturationDecrease
```
```
LightnessIncrease
```
```
LightnessDecrease
```
```
HueMin
```
```
HueMax
```
```
SaturationMin
```
```
SaturationMax
```
```
LightnessMin
```
```
LightnessMax
```

Variant

</>

pub type Variant {
  Default
  Muted
}

Constructors

```
Default
```
```
Muted
```

Values

color_picker

</>

pub fn color_picker(
  attributes: List(attribute.Attribute(a)),
  children: List(element.Element(a)),
) -> element.Element(a)

hint

</>

pub fn hint(text: String) -> element.Element(a)

input

</>

pub fn input(
  attributes: List(attribute.Attribute(a)),
) -> element.Element(a)

keymap

</>

pub fn keymap(
  key_event: keyboard.KeyEvent,
  mode: ColorMode,
) -> option.Option(Msg)

Keymap for color picker keyboard navigation

Keyboard interactions:

Arrow Right/Up: Increase current color value
Arrow Left/Down: Decrease current color value
Home: Minimum value (0)
End: Maximum value (360 for hue, 100 for saturation/lightness)
PageUp: Large increment (+10)
PageDown: Large decrement (-10)

Follows WAI-ARIA Slider pattern.

label

</>

pub fn label(lbl: String) -> attribute.Attribute(a)

size

</>

pub fn size(s: size.Size) -> attribute.Attribute(a)

swatch

</>

pub fn swatch(
  color: String,
  attributes: List(attribute.Attribute(a)),
) -> element.Element(a)

value

</>

pub fn value(val: String) -> attribute.Attribute(a)

variant

</>

pub fn variant(v: Variant) -> attribute.Attribute(a)