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/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 text-moon-24"
id="headless-collapsed"
breadcrumbs={@breadcrumb_items}
responsive_crumbs_on="md"
>
<Breadcrumb.Item
class="text-bulma text-moon-16 hover:text-trunks last:text-piccolo last:font-normal last:hover:text-bulma"
:let={crumb: crumb}
divider="controls_chevron_right"
>
<Breadcrumb.Item.Divider
divider="arrows_chevron_right_double"
class="text-bulma text-moon-24 mx-1"
/>
<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="other3_dots_horizontal" variant="ghost" class="text-bulma" size="sm" />
</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 text-moon-24"
id="headless-collapsed"
breadcrumbs={@breadcrumb_items}
responsive_crumbs_on="md"
>
<Breadcrumb.Item
class="text-bulma text-moon-16 hover:text-trunks last:text-piccolo last:font-normal last:hover:text-bulma"
:let={crumb: crumb}
divider="controls_chevron_right"
>
<Breadcrumb.Item.Divider
divider="arrows_chevron_right_double"
class="text-bulma text-moon-24 mx-1"
/>
<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="other3_dots_horizontal" variant="ghost" class="text-bulma" size="sm" />
</Dropdown.Trigger>
</Dropdown>
</Breadcrumb.Dropdown>
</Breadcrumb.Collapsed>
</div>
/\"""
end
"""
end
end