Packages
moon
2.87.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/carousel/carousel_control.ex
defmodule Moon.Design.Carousel.CarouselControl do
@moduledoc false
use Moon.StatelessComponent
@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 "The function to call when page is updated"
prop(on_change, :event)
@doc "Inner content of the component"
slot(default, required: true)
@doc "Will be got from Pagination in most cases"
prop(value, :integer, from_context: :value)
@doc "Aria label for DOM element"
prop(aria_label, :string)
def render(assigns) do
~F"""
<button
{=@id}
class={merge([
"max-sm:hidden align-middle shadow-moon-sm rounded-moon-i-sm bg-goku text-bulma",
"h-8 w-8 font-medium",
"leading-[0] no-underline cursor-pointer absolute top-1/2 -translate-y-1/2",
"origin-[top_center] z-5 disabled:opacity-60 disabled:cursor-not-allowed",
@class
])}
:on-click={@on_change}
data-testid={@testid}
aria-label={@aria_label}
{=@value}
>
<#slot />
</button>
"""
end
end