Packages
moon
2.79.0
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/breadcrumb_example/headless_collapsed.ex
defmodule MoonWeb.Examples.Design.BreadcrumbExample.HeadlessCollapsed do
@moduledoc false
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Breadcrumb
alias Moon.Design.Breadcrumb.Crumb
alias Moon.Icon
alias Moon.Design.Button.IconButton
alias Moon.Design.Dropdown
prop(breadcrumb_items, :list,
default: [
%Crumb{
link: "/components/v2/breadcrumb",
icon: "generic_home"
},
%Crumb{
name: "Page 1",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Page 2",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Page 3",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Page 4",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Current Page",
link: "/components/v2/breadcrumb"
}
]
)
defp get_collapsed_breadcrumbs(breadcrumb_items) do
count = Enum.count(breadcrumb_items)
Enum.slice(breadcrumb_items, 1..(count - 3))
end
def render(assigns) do
~F"""
<div>
<Breadcrumb.Collapsed
divider="arrows_chevron_right_double"
divider_class="text-bulma mt-0.5"
id="headless-collapsed"
breadcrumbs={@breadcrumb_items}
>
<Breadcrumb.Item
class="text-bulma hover:text-trunks last:text-piccolo last:font-normal last:hover:text-bulma"
:let={crumb: crumb}
divider="controls_chevron_right"
>
<Breadcrumb.Item.Divider>
<Icon name="arrows_chevron_right_double" class="rtl:rotate-180 mx-2 text-moon-14 text-bulma" />
</Breadcrumb.Item.Divider>
<Icon
name={crumb.icon}
class="text-moon-24"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</Breadcrumb.Item>
<Breadcrumb.Dropdown id="headless-collapsed">
<Dropdown id="headless-collapsed-breadcrumbs">
<Dropdown.Options class="min-w-[10rem] p-2 gap-1">
{#for crumb <- get_collapsed_breadcrumbs(@breadcrumb_items)}
<a href={crumb.link}>
<Dropdown.Option class="w-full p-2">
<Icon
name={crumb.icon}
class="text-moon-24 text-piccolo"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</Dropdown.Option>
</a>
{/for}
</Dropdown.Options>
<Dropdown.Trigger>
<IconButton icon="other_frame" variant="ghost" class="text-bulma" size="xs" />
</Dropdown.Trigger>
</Dropdown>
</Breadcrumb.Dropdown>
</Breadcrumb.Collapsed>
</div>
"""
end
def code() do
"""
alias Moon.Design.Breadcrumb
alias Moon.Design.Breadcrumb.Crumb
alias Moon.Icon
alias Moon.Design.Button.IconButton
alias Moon.Design.Dropdown
prop(breadcrumb_items, :list,
default: [
%Crumb{
link: "/components/v2/breadcrumb",
icon: "generic_home"
},
%Crumb{
name: "Page 1",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Page 2",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Page 3",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Page 4",
link: "/components/v2/breadcrumb"
},
%Crumb{
name: "Current Page",
link: "/components/v2/breadcrumb"
}
]
)
defp get_collapsed_breadcrumbs(breadcrumb_items) do
count = Enum.count(breadcrumb_items)
Enum.slice(breadcrumb_items, 1..(count - 3))
end
def render(assigns) do
~F/\"""
<div>
<Breadcrumb.Collapsed
divider="arrows_chevron_right_double"
divider_class="text-bulma mt-0.5"
id="headless-collapsed"
breadcrumbs={@breadcrumb_items}
>
<Breadcrumb.Item
class="text-bulma hover:text-trunks last:text-piccolo last:font-normal last:hover:text-bulma"
:let={crumb: crumb}
divider="controls_chevron_right"
>
<Breadcrumb.Item.Divider>
<Icon name="arrows_chevron_right_double" class="rtl:rotate-180 mx-2 text-moon-14 text-bulma" />
</Breadcrumb.Item.Divider>
<Icon
name={crumb.icon}
class="text-moon-24"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</Breadcrumb.Item>
<Breadcrumb.Dropdown id="headless-collapsed">
<Dropdown id="headless-collapsed-breadcrumbs">
<Dropdown.Options class="min-w-[10rem] p-2 gap-1">
{#for crumb <- get_collapsed_breadcrumbs(@breadcrumb_items)}
<a href={crumb.link}>
<Dropdown.Option class="w-full p-2">
<Icon
name={crumb.icon}
class="text-moon-24 text-piccolo"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</Dropdown.Option>
</a>
{/for}
</Dropdown.Options>
<Dropdown.Trigger>
<IconButton icon="other_frame" variant="ghost" class="text-bulma" size="xs" />
</Dropdown.Trigger>
</Dropdown>
</Breadcrumb.Dropdown>
</Breadcrumb.Collapsed>
</div>
/\"""
end
"""
end
end