Packages
moon
2.77.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
@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 "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>
<div class="w-6 text-center text-trunks text-moon-14 cursor-pointer">...</div>
</Dropdown.Trigger>
</Dropdown>
</#slot>
"""
end
end