Packages
moon
2.78.3
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
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/switcher_page.ex
defmodule MoonWeb.Pages.Components.SwitcherPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Heading
alias Moon.Components.Link
alias Moon.Components.Switcher
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/switcher",
name: "Switcher"
}
]
)
def mount(_params, _session, socket) do
socket =
assign(socket,
tabs: ~w(One Two Three),
selected_tab: "One"
)
{:ok, socket}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<Heading size={56} class="mb-4">Switcher</Heading>
<p>
<Link to="https://github.com/coingaming/moon/blob/main/lib/moon_web/pages/components/switcher_page.ex">Sourcecode of this page</Link>
</p>
<ExampleAndCode title="Default" id="switcher">
<:example>
<Switcher items={@tabs} selected_item={@selected_tab} click="tab_click" />
</:example>
<:code>{switcher_1_code()}</:code>
<:state>@tabs = {inspect(@tabs, pretty: true)}<br><br>@selected_tab = {@selected_tab}</:state>
</ExampleAndCode>
</TopToDown>
</Page>
"""
end
def handle_event("tab_click", %{"selected-item" => selected_item}, socket) do
socket = assign(socket, selected_tab: selected_item)
{:noreply, socket}
end
def switcher_1_code do
"""
alias Moon.Components.Switcher
<Switcher
items={@tabs}
selected_item={@selected_tab}
click="tab_click"
/>
def handle_event("tab_click", %{"selected-item" => selected_item}, socket) do
socket = assign(socket, selected_tab: selected_item)
{:noreply, socket}
end
"""
end
end