Packages
moon
2.72.1
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/examples/design/popover_example/position.ex
defmodule MoonWeb.Examples.Design.PopoverExample.Position do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Popover
alias Moon.Design.Button
import MoonWeb.Helpers.Lorem
import Moon.Helpers.Positions
prop(placemets, :list, default: position_list())
def render(assigns) do
~F"""
{#for placement <- @placemets}
<div class="w-1/4 sm:w-1/5 flex justify-center">
<Popover id={"popover-ex-#{placement}"}>
<Popover.Trigger>
<Button variant="outline">{placement}</Button>
</Popover.Trigger>
<Popover.Panel position={placement}>
<p class="p-4 text-moon-14">
I'm a {placement} popover
</p>
<p class="p-4 text-moon-14">{lorem()}</p>
</Popover.Panel>
</Popover>
</div>
{/for}
"""
end
def code() do
"""
alias Moon.Design.Popover
alias Moon.Design.Button
prop(placemets, :list, default: [
"top-start",
"top",
"top-end",
"bottom-start",
"bottom",
"bottom-end",
"right-start",
"right",
"right-end",
"left-start",
"left",
"left-end"
])
...
{#for placement <- @placemets}
<Popover id={"popover-ex-\#{placement}"}>
<Popover.Trigger>
<Button variant="outline">{placement}</Button>
</Popover.Trigger>
<Popover.Panel position={placement} class="w-[300px]">
<p class="p-4 text-moon-14">
I'm a {placement} popover
</p>
<p class="p-4 text-moon-14">#{lorem()}</p>
</Popover.Panel>
</Popover>
{/for}
"""
end
end