Packages
moon
2.87.4
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/popover_page.ex
defmodule MoonWeb.Pages.Design.PopoverPage 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.PopoverExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/popover",
name: "Popover"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
is_aria_support
is_rtl_support
title="Popover"
image="facing/components/popover.png"
>
<p>Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
PopoverExample.Default,
PopoverExample.Position,
PopoverExample.TriggerElements,
PopoverExample.WithClose
]} />
<PropsTable
title="Popover props"
data={[
%{
:name => ~c"id",
:type => ~c"string",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Unique element's identifier"
},
%{
:name => ~c"is_open",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Whether or not the popover is open"
},
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Content of Popover item, see Popover.Panel"
},
%{
:name => ~c"trigger",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Trigger element of Popover item, see Popover.Trigger"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
<PropsTable
title="Popover.Panel props"
data={[
%{
:name => ~c"position",
:type =>
~c"top | bottom | left | right | top-start | bottom-start | left-start | right-start | top-end | bottom-end | left-end | right-end",
:required => ~c"No",
:default => ~c"top",
:description => ~c"Set placement for popover"
},
%{
:name => ~c"class",
:type => ~c"css_class",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Tailwind classes for custom styles"
}
]}
/>
</Page>
"""
end
def component_anatomy do
"""
<Popover>
<Popover.Trigger>...</Popover.Trigger>
<Popover.Panel>...</Popover.Panel>
</Popover>
"""
end
end