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/drawer_page.ex
defmodule MoonWeb.Pages.Components.DrawerPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Facing.DeprecationWarning
alias Moon.Autolayouts.PullAside
alias Moon.Autolayouts.LeftToRight
alias Moon.Components.Button
alias Moon.Components.Drawer
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/drawer",
name: "Drawer"
}
]
)
data(drawer_1_is_open, :boolean, default: false)
data(drawer_2_is_open, :boolean, default: false)
def render(assigns) do
~F"""
<Page
{=@theme_name}
{=@active_page}
{=@breadcrumbs}
{=@direction}
class={"mr-64": @drawer_2_is_open}
>
<ComponentPageDescription title="Drawer">
<DeprecationWarning name="Drawer" page={MoonWeb.Pages.Design.DrawerPage} />
</ComponentPageDescription>
<ExampleAndCode title="Drawer on top right" id="drawer_1_example">
<:example>
<Button variant="primary" on_click="open_drawer_1">Open drawer</Button>
<Drawer class="w-64" :if={@drawer_1_is_open}>
<Drawer.Dialog close="close_drawer_1">
<:title>Title text</:title>
<:content>Content here</:content>
<:footer>
<PullAside>
<:left>
<Button>Label</Button>
</:left>
<:right>
<LeftToRight>
<Button variant="tertiary">Label</Button>
<Button variant="primary">Label</Button>
</LeftToRight>
</:right>
</PullAside>
</:footer>
</Drawer.Dialog>
</Drawer>
</:example>
<:code>{get_example_1_code()}</:code>
<:state>{get_example_1_state(assigns)}</:state>
</ExampleAndCode>
<ExampleAndCode title="Drawer on right that moves content" id="drawer_2_example">
<:example>
<Button variant="primary" on_click="open_drawer_2">Open drawer</Button>
<Drawer class="w-64" :if={@drawer_2_is_open}>
<Drawer.Dialog close="close_drawer_2">
<:title>Title text</:title>
<:content>Content here</:content>
<:footer>
<PullAside>
<:left>
<Button>Label</Button>
</:left>
<:right>
<LeftToRight>
<Button variant="tertiary">Label</Button>
<Button variant="primary">Label</Button>
</LeftToRight>
</:right>
</PullAside>
</:footer>
</Drawer.Dialog>
</Drawer>
</:example>
<:code>{get_example_2_code()}</:code>
<:state>{get_example_2_state(assigns)}</:state>
</ExampleAndCode>
</Page>
"""
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def handle_event("open_drawer_1", _params, socket) do
socket = assign(socket, drawer_1_is_open: true)
{:noreply, socket}
end
def handle_event("close_drawer_1", _params, socket) do
socket = assign(socket, drawer_1_is_open: false)
{:noreply, socket}
end
def handle_event("open_drawer_2", _params, socket) do
socket = assign(socket, drawer_2_is_open: true)
{:noreply, socket}
end
def handle_event("close_drawer_2", _params, socket) do
socket = assign(socket, drawer_2_is_open: false)
{:noreply, socket}
end
def get_example_1_code() do
"""
<Drawer class="w-64" :if={@drawer_is_open}>
<Drawer.Dialog close="set_close">
<:title>Title text</:title>
<:content>Content here</:content>
<:footer>
<PullAside>
<:left>
<Button>Label</Button>
</:left>
<:right>
<LeftToRight>
<Button variant="tertiary">Label</Button>
<Button variant="primary">Label</Button>
</LeftToRight>
</:right>
</PullAside>
</:footer>
</Drawer.Dialog>
</Drawer>
"""
end
def get_example_1_state(assigns) do
inspect(%{drawer_1_is_open: assigns.drawer_1_is_open})
end
def get_example_2_code() do
"""
<Page class={"mr-64": @drawer_2_is_open}>
<Drawer class="w-64" :if={@drawer_is_open}>
<Drawer.Dialog close="set_close">
<:title>Title text</:title>
<:content>Content here</:content>
<:footer>
<PullAside>
<:left>
<Button>Label</Button>
</:left>
<:right>
<LeftToRight>
<Button variant="tertiary">Label</Button>
<Button variant="primary">Label</Button>
</LeftToRight>
</:right>
</PullAside>
</:footer>
</Drawer.Dialog>
</Drawer>
</Page>
"""
end
def get_example_2_state(assigns) do
inspect(%{drawer_2_is_open: assigns.drawer_2_is_open})
end
end