Packages
moon
2.85.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/lego/radio.ex
defmodule Moon.Lego.Radio do
@moduledoc "Radio round mark to be shown"
use Moon.StatelessComponent
@doc "Additional CSS classes for the "
prop(class, :css_class)
@doc "Id attribute to be given to the HTML tag"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "If the mark should be checked "
prop(is_selected, :boolean, from_context: :is_selected)
def render(assigns) do
~F"""
<span
aria-checked={(@is_selected && "true") || "false"}
class={merge([
"relative flex items-center justify-center w-4 h-4 aspect-square m-1 rounded-full border border-trunks transition-colors",
"after:content-[\"\"] after:absolute after:w-0 after:h-0 after:rounded-full after:top-1/2 after:left-1/2",
"after:-translate-y-1/2 after:transition-all after:-translate-x-1/2 after:bg-piccolo",
"moon-checked:after:w-2 moon-checked:after:h-2 moon-checked:border-piccolo",
@class
])}
{=@id}
data-testid={@testid}
/>
"""
end
end