Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/design/carousel_page.ex
defmodule MoonWeb.Pages.Design.CarouselPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Anatomy
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.ExamplesList
alias MoonWeb.Components.Page
alias MoonWeb.Components.PropsTable
alias MoonWeb.Examples.Design.CarouselExample
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/carousel",
name: "Carousel"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Carousel" image="facing/components/carousel.png">
<p>Carousel is an effective way of displaying multiple images or content in a single space.</p>
<p>It not only helps in saving screen space, but also encourages visitors to focus on important website content and improves the overall visual appeal effectively.</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
CarouselExample.Default,
CarouselExample.CustomizedArrows,
CarouselExample.Indicators,
CarouselExample.Spaces,
CarouselExample.SelectIndex,
CarouselExample.Autoslide
]} />
<PropsTable title="Carousel props" module={Moon.Design.Carousel} />
<PropsTable title="Carousel.Reel props" module={Moon.Design.Carousel.Reel} />
<PropsTable title="Carousel.Item props" module={Moon.Design.Carousel.Item} />
<PropsTable title="Carousel.Indicator props" module={Moon.Design.Carousel.Indicator} />
<PropsTable title="Carousel.LeftArrow props" module={Moon.Design.Carousel.LeftArrow} />
<PropsTable title="Carousel.RightArrow props" module={Moon.Design.Carousel.RightArrow} />
</Page>
"""
end
defp component_anatomy do
"""
<Carousel>
<Carousel.LeftArrow>...</Carousel.LeftArrow>
<Carousel.Reel>
<Carousel.Item>...</Carousel.Item>
<Carousel.Indicators />
</Carousel.Reel>
<Carousel.RightArrow>...</Carousel.RightArrow>
</Carousel>
"""
end
end