Packages
moon
2.72.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/design/breadcrumb/dropdown.ex
defmodule Moon.Design.Breadcrumb.Dropdown do
@moduledoc false
use Moon.StatelessComponent, slot: "dropdown"
alias Moon.Design.Dropdown
alias Moon.Icon
alias Moon.Design.Button.IconButton
@doc "Id of the component"
prop(id, :string, required: true)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Data-testid attribute for DOM element"
prop(class, :css_class)
@doc "List of crumbs to display - Moon.Design.Breadcrumb.Crumb"
prop(items, :list, from_context: :items)
@doc "Name of custom icon used as a collapsed icon"
prop(icon, :string)
@doc "Default slot"
slot(default)
def render(assigns) do
~F"""
<#slot>
<Dropdown id={"#{@id}-collapsed-breadcrumbs"} {=@testid}>
<Dropdown.Options class="min-w-[8.5rem] p-1">
{#for crumb <- @items || []}
<a href={crumb.link}>
<Dropdown.Option class="w-full p-2">
<Icon
name={crumb.icon}
class="text-moon-24"
:if={Map.has_key?(crumb, :icon) && crumb.icon != ""}
/>
{#if crumb.name}
{crumb.name}
{/if}
</Dropdown.Option>
</a>
{/for}
</Dropdown.Options>
<Dropdown.Trigger>
<IconButton icon={@icon || "other3_dots_horizontal"} variant="ghost" size="xs" />
</Dropdown.Trigger>
</Dropdown>
</#slot>
"""
end
end