Packages
moon
2.79.6
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/pill.ex
defmodule Moon.Design.Tabs.Pill do
@moduledoc false
use Moon.StatelessComponent, slot: "tabs"
# open API
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "If true, the tab is disabled"
prop(disabled, :boolean, default: false)
@doc "Additional Tailwind classes for unselected tab"
prop(unselected_class, :css_class, default: "")
@doc "Additional Tailwind classes for selected tab"
prop(selected_class, :css_class, default: "bg-goku")
@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 "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}
data-testid={@testid}
role="tab"
type="button"
{=@tabindex}
aria-selected={"#{@is_selected}"}
{=@disabled}
class={merge([
"focus:outline-none text-moon-14 text-bulma font-semibold flex items-center justify-center transition-colors cursor-pointer rounded-moon-i-sm",
(@is_selected && @selected_class) || @unselected_class,
(@size === "sm" && "px-2 py-1 gap-1") || "py-2 px-3 gap-2",
(@disabled && "cursor-default text-trunks") || "hover:bg-goku",
@class
])}
:on-click={!@disabled && @on_change}
value={@tabindex}
><#slot /></button>
"""
end
end