Packages
moon
2.87.9
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/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