Packages
moon
2.70.0
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/carousel/indicator.ex
defmodule Moon.Design.Carousel.Indicator do
@moduledoc false
use Moon.StatelessComponent, slot: "indicator"
@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 "Additional Tailwind classes for background color of indicator in default state"
prop(default_bg_color, :css_class, default: "bg-beerus")
@doc "Additional Tailwind classes for background color of indicator in selected state"
prop(selected_bg_color, :css_class, default: "bg-piccolo")
# Internal API
@doc "Will be got from Carousel in most cases"
prop(on_change, :event, from_context: :on_change)
@doc "Will be got from Carousel in most cases"
prop(value, :integer, from_context: :value)
def render(assigns) do
~F"""
<button
{=@id}
type="button"
data-default_bg_color={@default_bg_color}
data-selected_bg_color={@selected_bg_color}
class={merge([
[
"w-2 h-2 mx-1 rounded-full",
@default_bg_color,
"moon-indicator"
],
@class
])}
{=@value}
:on-click={@on_change}
data-testid={@testid}
/>
"""
end
end