Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/tabs_page.ex
defmodule MoonWeb.Pages.Components.TabsPage do
@moduledoc false
require Logger
use MoonWeb, :live_view
alias Moon.Components.Tabs
alias Moon.Components.Tabs.TabLink
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(tab_id, :string)
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/tabs",
name: "Tabs"
}
]
)
data(props_info_array_tab, :list,
default: [
%{
:name => ~c"default",
:type => ~c"slot ",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Content inside the tab"
},
%{
:name => ~c"size",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - size variant"
},
%{
:name => ~c"items",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - array of TabLink items"
}
]
)
data(props_info_array_tab_link, :list,
default: [
%{
:name => ~c"on_click",
:type => ~c"event ",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Event to happen when tab is clicked"
},
%{
:name => ~c"element_left",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Left element"
},
%{
:name => ~c"element_right",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Right element"
},
%{
:name => ~c"to",
:type => ~c"any",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Link's destination"
}
]
)
def mount(params, _session, socket) do
{:ok, assign(socket, tab_id: params["tab_id"] || "1")}
end
def handle_params(params, uri, socket) do
{:noreply, assign(socket, uri: uri, tab_id: params["tab_id"] || "1")}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Tabs">
<DeprecationWarning
name="Tabs"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.TabsPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="tabs" class="mt-4">
<:example>
<Tabs>
<TabLink
active={@tab_id == "1"}
to={live_path(@socket, __MODULE__, tab_id: "1", theme_name: @theme_name, direction: @direction)}
>Link 1</TabLink>
<TabLink
active={@tab_id == "2"}
to={live_path(@socket, __MODULE__, tab_id: "2", theme_name: @theme_name, direction: @direction)}
>Link 2</TabLink>
<TabLink
active={@tab_id == "3"}
patch
to={live_path(@socket, __MODULE__, tab_id: "3", theme_name: @theme_name, direction: @direction)}
>Link 3 with url patch, no page reload</TabLink>
<TabLink active={@tab_id == "4"} on_click="clicked_tab" item_id="4">Link 4</TabLink>
</Tabs>
</:example>
<:code>{get_example_code()}</:code>
<:state>
@tab_id = {@tab_id}
</:state>
</ExampleAndCode>
<PropsTable data={@props_info_array_tab} />
<PropsTable data={@props_info_array_tab_link} />
</Page>
"""
end
def handle_event(
"clicked_tab",
%{"item_id" => item_id},
socket
) do
{:noreply,
redirect(socket,
to:
live_path(socket, __MODULE__,
tab_id: item_id,
theme_name: socket.assigns.theme_name,
direction: socket.assigns.direction
)
)}
end
def get_example_code() do
"""
alias Moon.Components.Tabs
alias Moon.Components.Tabs.TabLink
<Tabs>
<TabLink
active={@tab_id == "1"}
to={live_path(@socket, __MODULE__, tab_id: "1", theme_name: @theme_name)}
>Link 1</TabLink>
<TabLink
active={@tab_id == "2"}
to={live_path(@socket, __MODULE__, tab_id: "2", theme_name: @theme_name)}
>Link 2</TabLink>
<TabLink active={@tab_id == "3"} on_click="clicked_tab" item_id="3">Link 3</TabLink>
<TabLink active={@tab_id == "4"} on_click="clicked_tab" item_id="4">Link 4</TabLink>
</Tabs>
def handle_event(
"clicked_tab",
%{"item_id" => item_id},
socket
) do
{:noreply,
redirect(socket,
to: live_path(socket, __MODULE__, tab_id: item_id, theme_name: socket.assigns.theme_name)
)}
end
"""
end
end