Packages
moon
2.79.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/components/list_items_page.ex
defmodule MoonWeb.Pages.Components.ListItemsPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Assets.Icons.IconChartArea
alias Moon.Assets.Icons.IconChevronDownRounded
alias Moon.Autolayouts.TopToDown
alias Moon.Components.ListItems.SingleLineItem
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/list_items",
name: "List Items"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"default",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"List item subtext"
},
%{
:name => ~c"size",
:type => ~c"md | lg | xl",
:required => ~c"No",
:default => ~c"md",
:description => ~c"List item size"
},
%{
:name => ~c"background_color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"gohan",
:description => ~c"List item background color"
},
%{
:name => ~c"color",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - List item color"
},
%{
:name => ~c"left_icon",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Element on the left"
},
%{
:name => ~c"right_icon",
:type => ~c"slot",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Element on the right"
}
]
)
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}>
<ComponentPageDescription title="List Item">
<DeprecationWarning
name="MenuItem"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.MenuItemPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Medium size (default)" id="line_items_1">
<:example>
<TopToDown class="bg-gohan py-6 px-4 w-56 mx-auto">
<SingleLineItem>Single line item</SingleLineItem>
<SingleLineItem background_color="goku">Single line item</SingleLineItem>
<SingleLineItem current>
<:left_icon><IconChartArea /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem>
<:left_icon><IconChartArea /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem>
<:right_icon><IconChevronDownRounded /></:right_icon>
Single line item
</SingleLineItem>
<SingleLineItem>
<:left_icon><IconChartArea /></:left_icon>
<:right_icon><IconChevronDownRounded /></:right_icon>
Single line item
</SingleLineItem>
</TopToDown>
</:example>
<:code>{get_list_item_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Large size" id="line_items_2">
<:example>
<TopToDown class="bg-gohan py-6 px-4 w-56 mx-auto">
<SingleLineItem size="lg">Single line item</SingleLineItem>
<SingleLineItem size="lg" background_color="goku">Single line item</SingleLineItem>
<SingleLineItem size="lg" current>
<:left_icon><IconChartArea font_size="1.25rem" /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem size="lg">
<:left_icon><IconChartArea font_size="1.25rem" /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem size="lg">
<:right_icon><IconChevronDownRounded font_size="1.25rem" /></:right_icon>
Single line item
</SingleLineItem>
<SingleLineItem size="lg">
<:left_icon><IconChartArea font_size="1.25rem" /></:left_icon>
<:right_icon><IconChevronDownRounded font_size="1.25rem" /></:right_icon>
Single line item
</SingleLineItem>
</TopToDown>
</:example>
<:code>{get_list_item_2_code()}</:code>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def get_list_item_1_code() do
"""
alias Moon.Autolayouts.TopToDown
alias Moon.Components.ListItems.SingleLineItem
<TopToDown>
<SingleLineItem>Single line item</SingleLineItem>
<SingleLineItem background_color="goku">Single line item</SingleLineItem>
<SingleLineItem current>
<:left_icon><IconChartArea /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem>
<:left_icon><IconChartArea /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem>
<:right_icon><IconChevronDownRounded /></:right_icon>
Single line item
</SingleLineItem>
<SingleLineItem>
<:left_icon><IconChartArea /></:left_icon>
<:right_icon><IconChevronDownRounded /></:right_icon>
Single line item
</SingleLineItem>
</TopToDown>
"""
end
def get_list_item_2_code() do
"""
alias Moon.Autolayouts.TopToDown
alias Moon.Components.ListItems.SingleLineItem
<TopToDown>
<SingleLineItem size="lg">Single line item</SingleLineItem>
<SingleLineItem size="lg" background_color="goku">Single line item</SingleLineItem>
<SingleLineItem size="lg" current>
<:left_icon><IconChartArea font_size="1.25rem" /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem size="lg">
<:left_icon><IconChartArea font_size="1.25rem" /></:left_icon>
Single line item
</SingleLineItem>
<SingleLineItem size="lg">
<:right_icon><IconChevronDownRounded font_size="1.25rem" /></:right_icon>
Single line item
</SingleLineItem>
<SingleLineItem size="lg">
<:left_icon><IconChartArea font_size="1.25rem" /></:left_icon>
<:right_icon><IconChevronDownRounded font_size="1.25rem" /></:right_icon>
Single line item
</SingleLineItem>
</TopToDown>
"""
end
end