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/pages/design/menu_item_page.ex
defmodule MoonWeb.Pages.Design.MenuItemPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.MenuItemExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/menu_item",
name: "MenuItem"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
is_aria_support
title="MenuItem"
image="facing/components/menu_item.png"
>
<p>Menu items are used in such vertical menues and containers as Popovers, Sidebars, Drawers, Dialogs etc.</p>
<p>
Menu item row heights can vary based on the amount of content in each
row. The content in each row is flexible. By default, each menu item
row height is Medium(md) 40px for one line of content.
</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
MenuItemExample.Default,
MenuItemExample.AsLink,
MenuItemExample.WithIcon,
MenuItemExample.WithMeta,
MenuItemExample.Checkbox,
MenuItemExample.Radio,
MenuItemExample.MultiTitle,
MenuItemExample.MultiLineItems,
MenuItemExample.ExpandCollapse
]} />
<PropsTable module={Moon.Design.MenuItem} />
</Page>
"""
end
def component_anatomy do
"""
<MenuItem>...</MenuItem>
"""
end
end