Phoenix implementation of Zag.js Tabs.

Examples

List

You can use Corex.Content.new/1 to create a list of content items.

The id for each item is optional and will be auto-generated if not provided.

You can specify disabled for each item.

<.tabs
  class="tabs"
  items={Corex.Content.new([
    [trigger: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique."],
    [trigger: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."],
    [trigger: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."]
  ])}
/>

List Custom

Similar to List but render custom trigger and content slots that will be used for all items.

Use :trigger and :content slots to customize the rendering. Each slot receives the item data.

        <.tabs
  class="tabs"
  value="lorem"
  items={Corex.Content.new([
    [id: "lorem", trigger: "Lorem", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.", meta: %{indicator: "hero-chevron-right"}],
    [trigger: "Duis", content: "Nullam eget vestibulum ligula, at interdum tellus.", meta: %{indicator: "hero-chevron-right"}],
    [id: "donec", trigger: "Donec", content: "Congue molestie ipsum gravida a. Sed ac eros luctus.", disabled: true]
  ])}
>
  <:trigger :let={item}>
    {item.data.trigger}
  </:trigger>
  <:content :let={item}>
    {item.data.content}
  </:content>
</.tabs>

Custom

Render custom trigger and content slots for each tab item manually.

Use :trigger slot for the tab button and :content slot for the tab panel content. Each slot accepts a value attribute to identify the tab item.

<.tabs id="my-tabs" value="duis" class="tabs">
  <:trigger value="lorem">
    Lorem ipsum dolor sit amet
  </:trigger>
  <:content value="lorem">
    Consectetur adipiscing elit. Sed sodales ullamcorper tristique. Proin quis risus feugiat tellus iaculis fringilla.
  </:content>
  <:trigger value="duis">
    Duis dictum gravida odio ac pharetra?
  </:trigger>
  <:content value="duis">
    Nullam eget vestibulum ligula, at interdum tellus. Quisque feugiat, dui ut fermentum sodales, lectus metus dignissim ex.
  </:content>
  <:trigger value="donec" disabled>
    Donec condimentum ex mi
  </:trigger>
  <:content value="donec">
    Congue molestie ipsum gravida a. Sed ac eros luctus.
  </:content>
</.tabs>

Controlled

Render tabs controlled by the server.

You must use the on_value_change event to update the value on the server and pass the value as a string.

The event will receive the value as a map with the key value and the id of the tabs.

defmodule MyAppWeb.TabsLive do
use MyAppWeb, :live_view

def mount(_params, _session, socket) do
  {:ok, assign(socket, :value, "lorem")}
end

def handle_event("on_value_change", %{"value" => value}, socket) do
  {:noreply, assign(socket, :value, value)}
end

def render(assigns) do
  ~H"""
  <.tabs controlled value={@value} on_value_change="on_value_change" class="tabs">
    <:trigger value="lorem">
      Lorem ipsum dolor sit amet
    </:trigger>
    <:content value="lorem">
      Consectetur adipiscing elit. Sed sodales ullamcorper tristique. Proin quis risus feugiat tellus iaculis fringilla.
    </:content>
    <:trigger value="duis">
      Duis dictum gravida odio ac pharetra?
    </:trigger>
    <:content value="duis">
      Nullam eget vestibulum ligula, at interdum tellus. Quisque feugiat, dui ut fermentum sodales, lectus metus dignissim ex.
    </:content>
  </.tabs>
"""
end
end

Async

When the initial props are not available on mount, you can use the Phoenix.LiveView.assign_async function to assign the props asynchronously

You can use the optional Corex.Tabs.tabs_skeleton/1 to render a loading or error state

defmodule MyAppWeb.TabsAsyncLive do
use MyAppWeb, :live_view

def mount(_params, _session, socket) do
  socket =
    socket
    |> assign_async(:tabs, fn ->
      Process.sleep(1000)

      items = Corex.Content.new([
        [id: "lorem", trigger: "Lorem ipsum dolor sit amet", content: "Consectetur adipiscing elit. Sed sodales ullamcorper tristique.", disabled: true],
        [id: "duis", trigger: "Duis dictum gravida odio ac pharetra?", content: "Nullam eget vestibulum ligula, at interdum tellus."],
        [id: "donec", trigger: "Donec condimentum ex mi", content: "Congue molestie ipsum gravida a. Sed ac eros luctus."]
      ])

      {:ok,
       %{
         tabs: %{
           items: items,
           value: "duis"
         }
       }}
    end)

  {:ok, socket}
end

def render(assigns) do
  ~H"""
    <.async_result :let={tabs} assign={@tabs}>
      <:loading>
        <.tabs_skeleton count={3} class="tabs" />
      </:loading>

      <:failed>
        there was an error loading the tabs
      </:failed>

      <.tabs
        id="async-tabs"
        class="tabs"
        items={tabs.items}
        value={tabs.value}
      />
    </.async_result>
  """
end
end

API Control

In order to use the API, you must use an id on the component

Client-side

<button phx-click={Corex.Tabs.set_value("my-tabs", "item-1")}>
  Open Item 1
</button>

Server-side

def handle_event("open_item", _, socket) do
  {:noreply, Corex.Tabs.set_value(socket, "my-tabs", "item-1")}
end

Styling

Use data attributes to target elements:

[data-scope="tabs"][data-part="root"] {}
[data-scope="tabs"][data-part="item"] {}
[data-scope="tabs"][data-part="item-trigger"] {}
[data-scope="tabs"][data-part="item-content"] {}
[data-scope="tabs"][data-part="item-indicator"] {}

If you wish to use the default Corex styling, you can use the class tabs on the component. This requires to install mix corex.design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/tabs.css";

You can then use modifiers

<.tabs class="tabs tabs--accent tabs--lg">

Learn more about modifiers and Corex Design