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/examples/design/popover_example/default.ex
defmodule MoonWeb.Examples.Design.PopoverExample.Default do
@moduledoc false
use Moon.StatelessComponent
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"""
<Popover id="popover_id_1">
<Popover.Trigger>
<Button>Toggle Popover</Button>
</Popover.Trigger>
<Popover.Panel>
<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>
</div>
</Popover.Panel>
</Popover>
"""
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
}
...
<Popover id="popover_id_1">
<Popover.Trigger>
<Button>Toggle Popover</Button>
</Popover.Trigger>
<Popover.Panel>
<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>
</div>
</Popover.Panel>
</Popover>
"""
end
end