Packages
moon
2.87.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
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/dropdown_menu_button_page.ex
defmodule MoonWeb.Pages.Components.DropdownMenuButtonPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Assets.Icons.IconMore
alias Moon.Autolayouts.TopToDown
alias Moon.Components.DropdownMenuButton
alias Moon.Components.DropdownMenuItem
alias Moon.Components.DropdownMenuItems
alias Moon.Components.Heading
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/dropdown_menu_button",
name: "DropdownMenuButton"
}
]
)
def mount(_params, _session, socket) do
socket =
assign(socket,
show_options: false
)
{:ok, socket}
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<Heading size={56} class="mb-4">DropdownMenuButton</Heading>
<ExampleAndCode id="dropdown_menu_button_example">
<:example>
<div class="flex justify-center">
<DropdownMenuButton
id="dropdown_menu_button_1"
show={@show_options}
placement="bottom-end"
on_toggle="toggle_options"
>
<IconMore />
<:menu>
<DropdownMenuItems>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Share</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuItems>
</:menu>
</DropdownMenuButton>
</div>
</:example>
<:code>{dropdown_menu_button_1_code()}</:code>
</ExampleAndCode>
</TopToDown>
</Page>
"""
end
def handle_event("toggle_options", _, socket) do
{:noreply, assign(socket, show_options: !socket.assigns.show_options)}
end
def dropdown_menu_button_1_code do
"""
<DropdownMenuButton id="dropdown_menu_button" show={@show_options} placement="bottom-end" on_toggle="toggle_options">
<IconMore />
<:menu>
<DropdownMenuItems>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Share</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuItems>
</:menu>
</DropdownMenuButton>
"""
end
end