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
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
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