Packages
moon
2.72.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/design/tabs/tab.ex
defmodule Moon.Design.Tabs.Tab 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 "Default slot"
slot(default, required: true)
# inner API
@doc "Will be got from Tabs.List in most cases"
prop(tabindex, :integer, from_context: :tabindex)
@doc "Will be got from Tabs.List in most cases"
prop(is_selected, :boolean, from_context: :is_selected)
@doc "Will be got from Tabs.List in most cases"
prop(size, :string, values!: ~w(sm md), from_context: :size)
@doc "Will be got from Tabs in most cases"
prop(on_change, :event, from_context: :on_change)
def render(assigns) do
~F"""
<button
{=@id}
role="tab"
type="button"
{=@tabindex}
aria-selected={"#{@is_selected}"}
{=@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 && @selected_class) || @unselected_class,
(@disabled && "cursor-default text-trunks") ||
"hover:after:origin-top-left hover:after:scale-100 hover:text-piccolo",
@class
])}
:on-click={!@disabled && @on_change}
value={@tabindex}
data-testid={@testid}
><#slot /></button>
"""
end
end