Packages
moon
2.72.2
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/tabs/link.ex
defmodule Moon.Design.Tabs.Link do
@moduledoc false
use Moon.StatelessComponent, slot: "tabs"
# open API
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "If true, the tab is disabled"
prop(disabled, :boolean, default: false)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes for unselected tab"
prop(unselected_class, :css_class, default: "after:scale-x-0 text-bulma")
@doc "Additional Tailwind classes for selected tab"
prop(selected_class, :css_class, default: "after:scale-x-100 text-piccolo")
@doc "Content inside the tab"
slot(default, required: true)
# inner API
@doc "Will be got from Tabs.List in most cases"
prop(tabindex, :integer, from_context: :tabindex)
@doc "If tab is selected"
prop(is_selected, :boolean)
@doc "Will be got from Tabs.List in most cases"
prop(size, :string, values!: ~w(sm md), from_context: :size)
@doc "Href for the link"
prop(href, :string, required: true)
@doc "Attributes for the link"
prop(attrs, :any, default: [])
def render(assigns) do
~F"""
<a
{=@id}
role="tab"
type="button"
{=@tabindex}
aria-selected={"#{is_selected(assigns)}"}
{=@disabled}
class={merge([
"focus:outline-none text-moon-14 font-semibold flex items-center justify-center cursor-pointer",
"relative after:content-[\"\"] after:absolute after:left-0 after:bottom-0 after:w-full",
"after:h-[2px] after:bg-piccolo after:transition-transform after:duration-300 after:origin-top-left after:scale-y-100",
(@size === "sm" && "px-2 py-1 gap-1") || "py-2 px-3 gap-2",
(is_selected(assigns) && @selected_class) || @unselected_class,
(@disabled && "cursor-default text-trunks") ||
"hover:after:origin-top-left hover:after:scale-100 hover:text-piccolo",
@class
])}
{=@href}
value={@tabindex}
data-testid={@testid}
{...@attrs}
><#slot /></a>
"""
end
defp is_selected(_assigns = %{is_selected: is_selected}) do
# TODO: find a good url-based-way to understand if the tab is selected inside the component wo setting global params
is_selected
end
end