Tabs · API

Set the active value from client bindings, client JS, or a server event.

Set value (Client binding)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.action phx-click={Corex.Tabs.set_value("tabs-api-cb", "lorem")} class="button button--sm">Lorem</.action>
<.action phx-click={Corex.Tabs.set_value("tabs-api-cb", "duis")} class="button button--sm">Duis</.action>
<.action phx-click={Corex.Tabs.set_value("tabs-api-cb", nil)} class="button button--sm">Close all</.action>
<.tabs id="tabs-api-cb" class="tabs" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

Set value (Client JS)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <button
  type="button"
  class="button button--sm"
  onclick="document.getElementById('tabs-api-cjs')?.dispatchEvent(new CustomEvent('corex:tabs:set-value', {bubbles: false, detail: { value: 'lorem' } }))"
>
  Lorem (client JS)
</button>
<.tabs id="tabs-api-cjs" class="tabs" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

    const el = document.getElementById("tabs-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:tabs:set-value", { bubbles: false, detail: { value: "lorem" } })
);

    const el: HTMLElement | null = document.getElementById("tabs-api-cjs");
el?.dispatchEvent(
  new CustomEvent("corex:tabs:set-value", { bubbles: false, detail: { value: "lorem" } })
);

Set value (Server)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.action phx-click="tabs_api_lorem" class="button button--sm">Lorem</.action>
<.action phx-click="tabs_api_duis" class="button button--sm">Duis</.action>
<.action phx-click="tabs_api_close" class="button button--sm">Close all</.action>
<.tabs id="tabs-api-srv" class="tabs" value="lorem" items={Corex.Content.new([
  %{value: "lorem", label: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."},
  %{value: "duis", label: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus."},
  %{value: "donec", label: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."}
])} />

    def handle_event("tabs_api_lorem", _params, socket) do
  {:noreply, Corex.Tabs.set_value(socket, "tabs-api-srv", "lorem")}
end

def handle_event("tabs_api_duis", _params, socket) do
  {:noreply, Corex.Tabs.set_value(socket, "tabs-api-srv", "duis")}
end

def handle_event("tabs_api_close", _params, socket) do
  {:noreply, Corex.Tabs.set_value(socket, "tabs-api-srv", nil)}
end