Color Picker · Event
Server push events, then client-only custom events, each in its own block.
Hex doc
Phoenix
on_value_change (server)
R
G
B
A
| Time | Source | Value |
|---|---|---|
|
No event yet. Change the color to see rows. |
||
<.color_picker
value="#3b82f6"
label="Value (server)"
presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
class="color-picker"
on_value_change="cp_ev_server_value"
/>
def handle_event("cp_ev_server_value", %{"id" => id, "valueAsString" => value} = params, socket) do
IO.inspect(params, label: "cp_ev_server_value")
{:noreply, socket}
end
on_open_change (server)
R
G
B
A
| Time | Source | Value |
|---|---|---|
|
No event yet. Open or close the popover to see rows. |
||
<.color_picker
value="#3b82f6"
label="Open (server)"
presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
class="color-picker"
on_open_change="cp_ev_server_open"
/>
def handle_event("cp_ev_server_open", %{"id" => id, "open" => open} = params, socket) do
IO.inspect(params, label: "cp_ev_server_open")
{:noreply, socket}
end
on_value_change_client (DOM only)
R
G
B
A
| Time | Source | Value |
|---|---|---|
|
No forwarded event yet. Change the color to see rows. |
||
<.color_picker
value="#3b82f6"
label="Value (client only)"
presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
class="color-picker"
on_value_change_client="color-picker-cv"
/>
const el = document.getElementById("color-picker-ev-cv");
el?.addEventListener("color-picker-cv", (event) => {
console.log(event.detail);
});
const el = document.getElementById("color-picker-ev-cv");
el?.addEventListener("color-picker-cv", (event: Event) => {
console.log((event as CustomEvent<unknown>).detail);
});
on_open_change_client (DOM only)
R
G
B
A
| Time | Source | Value |
|---|---|---|
|
No forwarded event yet. Open or close the popover to see rows. |
||
<.color_picker
value="#3b82f6"
label="Open (client only)"
presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
class="color-picker"
on_open_change_client="color-picker-co"
/>
const el = document.getElementById("color-picker-ev-co");
el?.addEventListener("color-picker-co", (event) => {
console.log(event.detail);
});
const el = document.getElementById("color-picker-ev-co");
el?.addEventListener("color-picker-co", (event: Event) => {
console.log((event as CustomEvent<unknown>).detail);
});