Color Picker · API

Programmatic color: client `phx-click` binding, then the matching server push.

set_value (Client binding)

Set the color from actions

    <div class="layout__row">
  <.action phx-click={Corex.ColorPicker.set_value("color-picker-api-value-c", "#ff0000")} class="button button--sm">Set red</.action>
  <.action phx-click={Corex.ColorPicker.set_value("color-picker-api-value-c", "#3b82f6")} class="button button--sm">Set blue</.action>
</div>
<.color_picker
  value="#3b82f6"
  label="Set the color from actions"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
/>

set_value (Server)

Set the color (Server)

    <div class="layout__row">
  <.action phx-click="cp_api_s_value" phx-value-color="#ff0000" class="button button--sm">Set red</.action>
  <.action phx-click="cp_api_s_value" phx-value-color="#3b82f6" class="button button--sm">Set blue</.action>
</div>
<.color_picker
  value="#3b82f6"
  label="Set the color (Server)"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker"
/>

    def handle_event("cp_api_s_value", %{"color" => hex}, socket) do
  {:noreply, Corex.ColorPicker.set_value(socket, "color-picker-api-value-s", hex)}
end