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 ui-size-sm">Lorem</.action>
<.action phx-click={Corex.Tabs.set_value("tabs-api-cb", "duis")} class="button ui-size-sm">Duis</.action>
<.action phx-click={Corex.Tabs.set_value("tabs-api-cb", nil)} class="button ui-size-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.

    <div class="flex flex-wrap items-center gap-space">
  <.action
    phx-click={JS.dispatch("corex:tabs:set-value", to: "#tabs-api-cjs", bubbles: false, detail: %{value: "lorem"})}
    class="button ui-size-sm"
  >
    Lorem
  </.action>
  <.action
    phx-click={JS.dispatch("corex:tabs:set-value", to: "#tabs-api-cjs", bubbles: false, detail: %{value: "duis"})}
    class="button ui-size-sm"
  >
    Duis
  </.action>
  <.action
    phx-click={JS.dispatch("corex:tabs:set-value", to: "#tabs-api-cjs", bubbles: false, detail: %{value: nil})}
    class="button ui-size-sm"
  >
    Close all
  </.action>
</div>
<.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" } })
);
el?.dispatchEvent(
  new CustomEvent("corex:tabs:set-value", { bubbles: false, detail: { value: "duis" } })
);
el?.dispatchEvent(
  new CustomEvent("corex:tabs:set-value", { bubbles: false, detail: { value: null } })
);

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

Set value (Server)

Consectetur adipiscing elit. Sed sodales ullamcorper tristique.

    <.action phx-click="tabs_api_lorem" class="button ui-size-sm">Lorem</.action>
<.action phx-click="tabs_api_duis" class="button ui-size-sm">Duis</.action>
<.action phx-click="tabs_api_close" class="button ui-size-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