Corex.ColorPicker (Corex v0.1.0-beta.3)

View Source

Phoenix implementation of Zag.js Color Picker.

Examples

Basic

<.color_picker
  id="my-color-picker"
  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_value for programmatic color updates.

Summary

Components

color_picker(assigns)

API

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.
  • value (:string) - Initial color string sent as data-default-value for the hook. Defaults to "#000000".
  • name (:string) - The name attribute for form submission. Defaults to nil.
  • label (:string) - Label for the color picker trigger. Defaults to "Select Color".
  • close_on_select (:boolean) - Defaults to true.
  • 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: false, fit_viewport: true, offset: nil}.
  • presets (:list) - Defaults to [].
  • 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.
  • errors (:list) - Error messages to display (non-field API). Defaults to [].
  • field (Phoenix.HTML.FormField) - A form field, e.g. f[:color] or @form[:color].
  • Global attributes are accepted.

Slots

  • error - Accepts attributes:
    • class (:string)

API

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.