Toggle group · API
set_value via LiveView JS, DOM events on the hook root, or server push.
LiveView binding
<div class="layout__row">
<.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", ["lorem"])} class="button button--sm">Lorem</.action>
<.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", ["duis"])} class="button button--sm">Duis</.action>
<.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", ["donec"])} class="button button--sm">Donec</.action>
<.action phx-click={Corex.ToggleGroup.set_value("toggle-group-api-cb", [])} class="button button--sm">Clear</.action>
</div>
<.toggle_group id="toggle-group-api-cb" class="toggle-group" multiple value={["lorem"]}>
<:item value="lorem">Lorem</:item>
<:item value="duis">Duis</:item>
<:item value="donec">Donec</:item>
</.toggle_group>
Client JS
<div class="layout__row">
<.action
class="button button--sm"
phx-click={
Phoenix.LiveView.JS.dispatch("corex:toggle-group:set-value",
to: "#toggle-group-api-cjs",
detail: %{value: ["lorem"]},
bubbles: false
)
}
>
Lorem
</.action>
<.action
class="button button--sm"
phx-click={
Phoenix.LiveView.JS.dispatch("corex:toggle-group:set-value",
to: "#toggle-group-api-cjs",
detail: %{value: ["duis"]},
bubbles: false
)
}
>
Duis
</.action>
<.action
class="button button--sm"
phx-click={
Phoenix.LiveView.JS.dispatch("corex:toggle-group:set-value",
to: "#toggle-group-api-cjs",
detail: %{value: ["donec"]},
bubbles: false
)
}
>
Donec
</.action>
</div>
<.toggle_group id="toggle-group-api-cjs" class="toggle-group" multiple value={["donec"]}>
<:item value="lorem">Lorem</:item>
<:item value="duis">Duis</:item>
<:item value="donec">Donec</:item>
</.toggle_group>
const el = document.getElementById("toggle-group-api-cjs");
el?.dispatchEvent(
new CustomEvent("corex:toggle-group:set-value", { bubbles: false, detail: { value: ["donec"] } })
);
const el: HTMLElement | null = document.getElementById("toggle-group-api-cjs");
el?.dispatchEvent(
new CustomEvent("corex:toggle-group:set-value", {
bubbles: false,
detail: { value: ["donec"] },
})
);
Server push
<div class="layout__row">
<.action phx-click="tg_api_lorem" class="button button--sm">Lorem</.action>
<.action phx-click="tg_api_duis" class="button button--sm">Duis</.action>
<.action phx-click="tg_api_donec" class="button button--sm">Donec</.action>
<.action phx-click="tg_api_clear" class="button button--sm">Clear</.action>
</div>
<.toggle_group id="toggle-group-api-srv" class="toggle-group" multiple value={["lorem"]}>
<:item value="lorem">Lorem</:item>
<:item value="duis">Duis</:item>
<:item value="donec">Donec</:item>
</.toggle_group>
def handle_event("tg_api_lorem", _params, socket) do
{:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", ["lorem"])}
end
def handle_event("tg_api_duis", _params, socket) do
{:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", ["duis"])}
end
def handle_event("tg_api_donec", _params, socket) do
{:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", ["donec"])}
end
def handle_event("tg_api_clear", _params, socket) do
{:noreply, Corex.ToggleGroup.set_value(socket, "toggle-group-api-srv", [])}
end