EasyPage.Tabber (easy_page v0.1.0)

A server side tabination component with lifecycle hooks. You probably do NOT need this, as most use-cases for tabs would be better off with a client-side javascript solution.

One possible use case for tabber is when you want to lazily load data. I.e., call the database on the first time you enter a tab.

Usage

# Now we create a tab component. 
defmodule TabA do
  @behaviour EasyPage.Tabber.Tab
 
  # All tab callbacks are optional.
  # They each take a socket, and return a socket
  @impl true
  def on_first_enter(socket) do
    dbg "some setup stuff"
    socket
  end

end

# And to tie it all together, you must:
# 1. Initialize it in your liveview,
# 2. Call the Tabber.Body.body/1 component, and pass each tab into it as a slot.
defmodule MyAppWeb.Parent do
  use MyAppWeb, :live_view
  alias EasyPage.Components.Tabber

  def mount(_, _, socket) do
    socket = Tabber.init_tabs(socket, [ 
      {"Tab A", TabA}, # <- Each title must be unique
      {"Tab B", TabB}, # But the module need not.
      {"Tab C", TabC} 
  ], default: "Tab A")
    {:ok, socket}
  end


  # Let tabber handle it's own events.
  @impl true
  def handle_event("tabber_" <> _ = evt, params, socket) do
    EasyPage.Tabber.EventHandlers.handle_event(evt, params, socket)
  end

  def render(assigns) do
    ~H"""
    <Tabber.Style.style />
    <Tabber.Menu.menu tabber={@tabber} />

    <Tabber.Body.body tabber={@tabber}>
      <:tab title="Tab A">
        <p>Rendering Tab A</p>
      </:tab>

      <:tab title="Tab B">
        <p>Rendering Tab B</p>
      </:tab>

      <:tab title="Tab C">
        <p>Rendering Tab C</p>
      </:tab>

    </Tabber.Body.body>
    """
  end
end

To learn more about Tab modules, look at EasyPage.Tabber.Tab

Summary

Functions

Change the current tab, calling all appropriate callback functions as needed. Takes either the title, or idx of a tab.

Use this to ensure a specific tab is open upon render.

Functions

click_tab(socket, idx)

Change the current tab, calling all appropriate callback functions as needed. Takes either the title, or idx of a tab.

Keep in mind, you probably never need to use this function directly, it is called automatically via "tabber_" events.

def handle_event("click", %{"tab" => tab}, socket) do
  socket = EasyPage.Tabber.click_tab(socket, tab.idx)
  {:noreply, socket}
end

init_tabs(socket, tab_tups, opts \\ [])

Use this to ensure a specific tab is open upon render.

def mount(_, _, socket) do
  socket = EasyPage.Tabber.init_tabs(socket, [
    {"My Tab", module: SomeTab},
    {"Another Tab", module: AnotherTab},
  ])
  {:ok, socket}
end

Options

default (string | nil)

This must match one of the tab titles