Packages
moon
2.72.2
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/design/drawer_page.ex
defmodule MoonWeb.Pages.Design.DrawerPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.DrawerExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/drawer",
name: "Drawer"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription is_in_progress is_aria_support is_rtl_support title="Drawer">
<p>
The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
DrawerExample.Default,
DrawerExample.Positions,
DrawerExample.WithBackdrop,
DrawerExample.WithClose
]} />
<PropsTable
title="Drawer props"
data={[
%{
:name => ~c"is_open",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Whether or not the Drawer is opened"
},
%{
:name => ~c"on_close",
:type => ~c"event",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Handler for open/close of the element"
},
%{
:name => ~c"panel",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Content of Drawer element, see Drawer.Panel"
},
%{
:name => ~c"backdrop",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Backdrop of Drawer element, see Drawer.Backdrop"
}
]}
/>
<PropsTable
title="Drawer.Panel"
data={[
%{
:name => ~c"position",
:type => ~c"top | bottom | start | end",
:required => ~c"No",
:default => ~c"end",
:description => ~c"Drawer position on screen"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
<PropsTable
title="Drawer.Backdrop"
data={[
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
</Page>
"""
end
defp component_anatomy do
"""
<Drawer>
<Drawer.Panel>...</Drawer.Panel>
</Drawer.Backdrop>
</Drawer>
"""
end
end