Packages

moon

2.79.4
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

HexDocs

Current section

Files

Jump to
Readme
89 Versions
17 Dependencies
Dependants
Files
Activity
moon lib moon_web pages design pagination_page.ex
Raw

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