Packages
moon
2.87.3
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/components/as_compoent.ex
defmodule Moon.Components.AsComponent do
@moduledoc """
Some kind of "polymorphic" stuff. "as" propertry is responsible for HTNL tag is rendered.
"""
use Moon.StatelessComponent
prop(class, :css_class)
prop(as, :string, values!: ~w(a button div), default: "button")
# for as="a" type only
prop(href, :string)
# for as="a" type only
prop(target, :string)
# for as="a" type only
prop(rel, :string)
# for as="button" only
prop(on_click, :event)
# for everything
prop(values, :list, default: [])
prop(role, :string)
prop(attrs, :map, default: %{})
prop(is_selected, :boolean, default: false)
prop(value, :string)
slot(default)
prop(testid, :string)
prop(id, :string)
prop(aria_label, :string)
def render(assigns) do
~F"""
{#if @as == "button"}
<button
{=@class}
:on-click={@on_click}
:values={@values}
{=@role}
{=@value}
{...@attrs}
{=@id}
aria-label={@aria_label}
data-testid={@testid}
><#slot /></button>
{#elseif @as == "a"}
<a
{=@class}
{=@href}
{=@target}
{=@rel}
{...@attrs}
{=@id}
{=@value}
data-testid={@testid}
:values={@values}
><#slot /></a>
{#elseif @as == "div"}
<div {=@class} {...@attrs} {=@id} {=@value} data-testid={@testid} :values={@values}><#slot /></div>
{/if}
"""
end
end