Packages
moon
2.76.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_web/pages/design/pagination_page.ex
defmodule MoonWeb.Pages.Design.PaginationPage do
@moduledoc false
require Logger
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.PaginationExample
alias MoonWeb.Components.ExampleAndCode
data(breadcrumbs, :any,
default: [
%{
to: "/components",
name: "Components"
},
%{
to: "/components/v2/pagination",
name: "Pagination"
}
]
)
data(current_page, :integer)
def mount(params, _session, socket) do
{:ok, assign(socket, current_page: String.to_integer(params["page"] || "1"))}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription
is_in_progress
is_rtl_support
title="Pagination"
image="facing/components/pagination.png"
>
<p>Pagination is the process of splitting information over multiple pages instead of showing it all on a single page.</p>
<p>Also the name for the interface component used for navigating between these pages.</p>
</ComponentPageDescription>
<Anatomy>{component_anatomy()}</Anatomy>
<ExamplesList examples={[
PaginationExample.WithIcons,
PaginationExample.WithText
]} />
<ExampleAndCode title="With page hrefs" id="with_hrefs">
<:example>
<PaginationExample.WithPageHrefs id="with_hrefs" {=@current_page} />
</:example>
<:code>{PaginationExample.WithPageHrefs.code()}</:code>
</ExampleAndCode>
<PropsTable title="Pagination props" module={Moon.Design.Pagination} />
<PropsTable title="Pagination.PrevButton props" module={Moon.Design.Pagination.PrevButton} />
<PropsTable title="Pagination.NextButton props" module={Moon.Design.Pagination.NextButton} />
<PropsTable title="Pagination.Pages props" module={Moon.Design.Pagination.Pages} />
</Page>
"""
end
defp component_anatomy do
"""
<Pagination>
<Pagination.PrevButton>...</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton>...</Pagination.NextButton>
</Pagination>
"""
end
end