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_web/pages/components/carousel_page.ex
defmodule MoonWeb.Pages.Components.CarouselPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Carousel
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/carousel",
name: "Carousel"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"space",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO"
},
%{
:name => ~c"items",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Items to display inside carousel"
},
%{
:name => ~c"scroll_to_left_button",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Scroll to left button"
},
%{
:name => ~c"scroll_to_right_button",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Scroll to right button"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Carousel">
<p>
An interactive extension of the Reel component to cycle through content.
</p>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="carousel_1">
<:example>
<Carousel>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
</Carousel>
</:example>
<:code>{carousel_1_code()}</:code>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def carousel_1_code do
"""
<Carousel>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
<div class="inline-block bg-goku p-72 mr-5 scroll-snap-align-start">Item</div>
</Carousel>
"""
end
end