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/design/bottom_sheet_page.ex
defmodule MoonWeb.Pages.Design.BottomSheetPage 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.BottomSheetExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/bottomsheet",
name: "BottomSheet"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="BottomSheet" image="facing/components/bottom_sheet.png">
<p>The bottom sheet component is a modified dialog that slides from the bottom of the screen, common pattern in mobile apps.</p>
<p>Bottom sheets can contain any anything so let your imagination fly.</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
BottomSheetExample.Default,
BottomSheetExample.DifferentSizes,
BottomSheetExample.WithDraghandle,
BottomSheetExample.WithTitle,
BottomSheetExample.Customization,
BottomSheetExample.Responsive
]} />
<PropsTable title="Bottomsheet props" module={Moon.Design.BottomSheet} />
<PropsTable title="Bottomsheet.Panel props" module={Moon.Design.BottomSheet.Panel} />
<PropsTable title="Bottomsheet.Header props" module={Moon.Design.BottomSheet.Header} />
<PropsTable title="Bottomsheet.DragHandle props" module={Moon.Design.BottomSheet.DragHandle} />
<PropsTable title="Bottomsheet.Backdrop props" module={Moon.Design.BottomSheet.Backdrop} />
</Page>
"""
end
def component_anatomy do
"""
<BottomSheet>
<BottomSheet.Backdrop />
<BottomSheet.Panel>
<BottomSheet.Header>
<BottomSheet.Draghandle />
...
</BottomSheet.Header>
...
</BottomSheet.Panel>
</BottomSheet>
"""
end
end