Packages
moon
2.79.8
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/with_close.ex
defmodule MoonWeb.Examples.Design.PopoverExample.WithClose do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Popover
alias Moon.Design.Button
alias Moon.Design.MenuItem
alias Moon.Components.Lego
alias Moon.Icons.{
GenericTrophy,
MediaTuner,
MediaMegaphone
}
def render(assigns) do
~F"""
<div>
<Popover id="popover_id_8">
<Popover.Trigger>
<Button>Toggle Popover</Button>
</Popover.Trigger>
<Popover.Panel class="!w-96">
<div class="p-6 flex flex-col gap-6">
<MenuItem>
<span class="flex w-11 h-11 bg-gohan items-center justify-center rounded-lg">
<GenericTrophy class="text-bulma text-[1.5rem]" />
</span>
<Lego.MultiTitle title="Tournaments">
Best tournaments with streamers
</Lego.MultiTitle>
</MenuItem>
<MenuItem>
<span class="flex w-11 h-11 bg-gohan items-center justify-center">
<MediaMegaphone class="text-bulma text-[1.5rem]" />
</span>
<Lego.MultiTitle title="Promotions">
Your favourite games
</Lego.MultiTitle>
</MenuItem>
<MenuItem>
<span class="flex w-11 h-11 bg-gohan items-center justify-center">
<MediaTuner class="text-bulma text-[1.5rem]" />
</span>
<Lego.MultiTitle title="Providers">
Your favourite games
</Lego.MultiTitle>
</MenuItem>
<Button on_click="set_close" testid="close_popover">Close</Button>
</div>
</Popover.Panel>
</Popover>
</div>
"""
end
def handle_event("set_close", _, socket) do
Popover.close("popover_id_8")
{:noreply, socket}
end
def code() do
"""
alias Moon.Design.Popover
alias Moon.Design.Button
alias Moon.Design.MenuItem
alias Moon.Components.Lego
alias Moon.Icons.{
GenericTrophy,
MediaTuner,
MediaMegaphone
}
def render(assigns) do
~F\\\"""
<div>
<Popover id="popover_id_8">
<Popover.Trigger>
<Button>Toggle Popover</Button>
</Popover.Trigger>
<Popover.Panel class="!w-96">
<div class="p-6 flex flex-col gap-6">
<MenuItem>
<span class="flex w-11 h-11 bg-gohan items-center justify-center rounded-lg">
<GenericTrophy class="text-bulma text-[1.5rem]" />
</span>
<Lego.MultiTitle title="Tournaments">
Best tournaments with streamers
</Lego.MultiTitle>
</MenuItem>
<MenuItem>
<span class="flex w-11 h-11 bg-gohan items-center justify-center">
<MediaMegaphone class="text-bulma text-[1.5rem]" />
</span>
<Lego.MultiTitle title="Promotions">
Your favourite games
</Lego.MultiTitle>
</MenuItem>
<MenuItem>
<span class="flex w-11 h-11 bg-gohan items-center justify-center">
<MediaTuner class="text-bulma text-[1.5rem]" />
</span>
<Lego.MultiTitle title="Providers">
Your favourite games
</Lego.MultiTitle>
</MenuItem>
<Button on_click="set_close" testid="close_popover">Close</Button>
</div>
</Popover.Panel>
</Popover>
</div>
\\\"""
end
def handle_event("set_close", _, socket) do
Popover.close("popover_id_8")
{:noreply, socket}
end
"""
end
end