Corex.ColorPicker (Corex v0.1.0-alpha.33)

View Source

Phoenix implementation of Zag.js Color Picker.

Examples

Basic

<.color_picker
  id="my-color-picker"
  default_value="rgb(25, 9, 192, 0.9)"
  label="Select Color (RGBA)"
  presets={["#ff0000", "#00ff00", "#0000ff", "rgb(25, 9, 192, 0.9)"]}
  class="color-picker"
/>

Styling

Target elements via data attributes:

[data-scope="color-picker"][data-part="root"] {}
[data-scope="color-picker"][data-part="label"] {}
[data-scope="color-picker"][data-part="control"] {}
[data-scope="color-picker"][data-part="trigger"] {}
[data-scope="color-picker"][data-part="content"] {}
[data-scope="color-picker"][data-part="area"] {}
[data-scope="color-picker"][data-part="channel-slider"] {}
[data-scope="color-picker"][data-part="swatch-trigger"] {}

Import the Corex design:

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/color-picker.css";

Events

  • on_value_change / on_value_change_end - when color changes (detail: %{valueAsString: string})
  • on_value_change_client / on_value_change_end_client - client-only variants
  • on_open_change - when open state changes (detail: %{open: boolean})
  • on_open_change_client - client-only variant
  • on_format_change - when format changes (detail: %{format: string})
  • on_pointer_down_outside / on_focus_outside / on_interact_outside - when interacting outside

API Control

Use set_open, set_value, set_format for programmatic control.

Summary

Components

color_picker(assigns)

API

set_format(color_picker_id, format)

Sets the color format from client-side. Returns a Phoenix.LiveView.JS command. Format must be one of: "rgba", "hsla", "hsba", "hex".

set_format(socket, color_picker_id, format)

Sets the color format from server-side.

set_open(color_picker_id, open)

Opens or closes the color picker from client-side. Returns a Phoenix.LiveView.JS command.

set_open(socket, color_picker_id, open)

Opens or closes the color picker from server-side.

set_value(color_picker_id, value)

Sets the color value from client-side. Returns a Phoenix.LiveView.JS command. Value can be any color string (e.g. "#ff0000", "rgba(255, 0, 0, 1)").

set_value(socket, color_picker_id, value)

Sets the color value from server-side.

Components

color_picker(assigns)

Attributes

  • id (:string) - The id of the color picker.
  • default_value (:string) - Initial color value (e.g. rgb(25, 9, 192, 0.9) or #ff0000). Defaults to nil.
  • value (:string) - Controlled value when controlled is true. Defaults to nil.
  • controlled (:boolean) - Whether value is controlled externally. Defaults to false.
  • name (:string) - The name attribute for form submission. Defaults to nil.
  • label (:string) - Label for the color picker trigger. Defaults to "Select Color".
  • format (:string) - Defaults to "rgba". Must be one of "rgba", "hsla", "hsba", or "hex".
  • default_format (:string) - Defaults to nil.Must be one of nil, "rgba", "hsla", "hsba", or "hex".
  • close_on_select (:boolean) - Defaults to true.
  • default_open (:boolean) - Defaults to false.
  • open (:boolean) - Defaults to nil.
  • open_auto_focus (:boolean) - Defaults to true.
  • disabled (:boolean) - Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • read_only (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • positioning (:map) - Defaults to %Corex.Positioning{hide_when_detached: true, strategy: "fixed", placement: "bottom", gutter: 8, shift: 0, overflow_padding: 0, arrow_padding: 4, flip: true, slide: true, overlap: false, same_width: true, fit_viewport: false}.
  • presets (:list) - Defaults to ["#ff0000", "#00ff00", "#0000ff"].
  • class (:string) - Defaults to nil.
  • on_value_change (:string) - Defaults to nil.
  • on_value_change_client (:string) - Defaults to nil.
  • on_value_change_end (:string) - Defaults to nil.
  • on_value_change_end_client (:string) - Defaults to nil.
  • on_open_change (:string) - Defaults to nil.
  • on_open_change_client (:string) - Defaults to nil.
  • on_format_change (:string) - Defaults to nil.
  • on_pointer_down_outside (:string) - Defaults to nil.
  • on_focus_outside (:string) - Defaults to nil.
  • on_interact_outside (:string) - Defaults to nil.
  • translation (Corex.ColorPicker.Translation) - Override translatable strings. Defaults to nil.
  • Global attributes are accepted.

API

set_format(color_picker_id, format)

Sets the color format from client-side. Returns a Phoenix.LiveView.JS command. Format must be one of: "rgba", "hsla", "hsba", "hex".

set_format(socket, color_picker_id, format)

Sets the color format from server-side.

set_open(color_picker_id, open)

Opens or closes the color picker from client-side. Returns a Phoenix.LiveView.JS command.

set_open(socket, color_picker_id, open)

Opens or closes the color picker from server-side.

set_value(color_picker_id, value)

Sets the color value from client-side. Returns a Phoenix.LiveView.JS command. Value can be any color string (e.g. "#ff0000", "rgba(255, 0, 0, 1)").

set_value(socket, color_picker_id, value)

Sets the color value from server-side.