Packages
moon
2.79.13
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/reel.ex
defmodule Moon.Design.Carousel.Reel do
@moduledoc false
use Moon.StatelessComponent, slot: "reel"
import Moon.Helpers.MakeList
@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 indicator"
prop(indicator_class, :css_class)
@doc "Item of Carousel component, see Carousel.Item"
slot(item)
@doc "Indicator of Carousel component, see Carousel.Indicator"
slot(indicator)
@doc "Default slot of Carousel.Reel, used for examples with auto-generated Carousel items"
slot(default)
# Internal API
@doc "Will be got from Carousel in most cases"
prop(autoslide_delay, :integer, from_context: :autoslide_delay)
@doc "Will be got from Carousel in most cases"
prop(step, :integer, from_context: :step)
@doc "Will be got from Carousel in most cases"
prop(value, :integer, from_context: :value)
@doc "Will be got from Carousel in most cases"
prop(on_change, :event, from_context: :on_change)
def render(assigns) do
~F"""
<ul
{=@id}
class={[
merge([
[
"flex overflow-x-auto overflow-y-hidden h-auto hidden-scroll gap-4 no-scrollbar",
"[-webkit-overflow-scrolling:touch] [scrollbar-width:none]",
"[-ms-overflow-style:-ms-autohiding-scrollbar]",
"[&>li]:list-none [&>li]:before:absolute [&>li]:before:content-["200B"]",
"[&>*]:flex-[0_0_auto] [&>img]:h-full [&>img]:basis-auto [&>img]:w-auto",
"snap-mandatory rtl:flex-row-reverse",
"moon-reel",
"overflow-x-hidden": @autoslide_delay
],
@class
]),
"snap-x"
]}
data-testid={@testid}
step={@step}
>
{#for {item, index} <- Enum.with_index(make_list(@item))}
<#slot
{item}
context_put={
value: to_string(index),
is_active: index == @value
}
/>
{/for}
<#slot />
</ul>
<div class={merge([
"flex absolute bottom-8 left-1/2 -translate-x-1/2 rtl:flex-row-reverse",
@indicator_class
])}>
{#for {item, index} <- Enum.with_index(make_list(@item))}
{#if !item.is_hidden}
<#slot
{@indicator}
context_put={
on_change: @on_change,
value: to_string(index)
}
/>
{/if}
{/for}
</div>
"""
end
end