Packages
moon
2.79.12
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/dropdown/link.ex
defmodule Moon.Design.Dropdown.Link do
@moduledoc "Single option for the dropdown component. Renders as a link"
use Moon.StatelessComponent, slot: "option"
@doc "Data-testid attribute for button"
prop(testid, :string)
@doc "Id attribute for buttons"
prop(id, :string)
@doc "Title to be shown when no default slot is given"
prop(title, :string)
@doc "Additional CSS classes for the button tag"
prop(class, :css_class)
@doc "If the button is disabled"
prop(disabled, :boolean)
@doc "Value of the option, in most cases got from context"
prop(value, :any, from_context: :value)
@doc "If the option is selected, in most cases got from context"
prop(is_selected, :boolean, from_context: :is_selected)
@doc "Text size & paddings for the option. Is set by Dropdown.Options in most cases"
prop(size, :string, values!: ~w(sm md lg), from_context: :size)
@doc "Href for the option"
prop(href, :string)
@doc "Additional attributes for the a tag"
prop(attrs, :map, default: %{})
@doc "Inner content of the option"
slot(default)
def render(assigns) do
~F"""
<a
{=@id}
{=@value}
role="option"
{=@disabled}
class={merge([
[
"bg-transparent text-moon-14 text-bulma whitespace-nowrap flex",
"focus:outline-none focus:bg-heles cursor-pointer hover:bg-heles transition w-full",
"bg-heles": @is_selected,
"opacity-60 cursor-not-allowed": @disabled,
"h-12 p-3 rounded-moon-i-sm": @size == "lg",
"h-8 py-1 px-2 rounded-moon-i-xs": @size == "sm",
"h-10 py-2 px-3 rounded-moon-i-sm": @size == "md"
],
@class
])}
data-testid={@testid}
{=@href}
{...@attrs}
>
<#slot>{@title}</#slot>
</a>
"""
end
end