Beacon.LiveAdmin.StationUI.HTML.Pagination (Beacon LiveAdmin v0.4.0)

View Source

Summary

Functions

The pagination component renders clickable numbered elements to progress through content that spans multiple pages.

Functions

pagination(assigns)

The pagination component renders clickable numbered elements to progress through content that spans multiple pages.

The default size for each pagination button is "md" but the size can be changed by supplying the class attribute to each slot.

Suggested size classes: xl: gap-x-4 px-8 py-3 text-4xl lg:focus-visible:ring-4 lg: gap-x-4 px-7 py-2.5 text-2xl md: gap-x-2 px-6 py-2 text-base sm: gap-x-2 px-5 py-2 text-sm xs: gap-x-2 px-4 py-2 text-xs

Example Usage

Example contents of a LiveView for the ~p"/posts" route:

@impl true
def mount(_params, _session, socket) do
  {:ok, socket}
end

@impl true
def handle_params(params, _url, socket) do
  {:noreply, assign_paginated_posts(socket, params)}
end

defp assign_paginated_posts(socket, params) do
  page = get_pagination_param(params, "page", 1)
  page_size = get_pagination_param(params, "page_size", 10)
  offset = (page - 1) * page_size

  socket
  |> assign(:pagination_params, %{"page" => page, "page_size" => page_size})
  |> assign(:posts, Posts.list_posts(offset: offset, limit: page_size))
  |> assign(:posts_count, Posts.count_posts())
end

defp get_pagination_param(params, param, default) do
  value = to_string(params[param] || default)

  case Integer.parse(value) do
    {page, _} -> max(page, 1)
    _ -> default
  end
end

Example usage in the rendered template:

<.pagination
  link_fn={&~p"/posts?#{&1}"}
  params={@pagination_params}
  total_count={@posts_count}
>
  <:first>
    <.icon class="h-5 w-5" name="hero-chevron-double-left-solid" />
    First
  </:first>

  <:previous>
    <.icon class="h-4 w-4" name="hero-chevron-left-solid" />

    <span class="sr-only">Prev</span>
  </:previous>

  <:page_links />

  <:next>
    <span class="sr-only">Next</span>

    <.icon class="h-4 w-4" name="hero-chevron-right-solid" />
  </:next>

  <:last>
    Last
    <.icon class="h-5 w-5" name="hero-chevron-double-right-solid" />
  </:last>
</.pagination>

Attributes

  • class (:string) - Defaults to "inline-flex gap-x-2.5".
  • id (:string) - required if more than one pagination component is on a single page. Defaults to "pagination-component".
  • label (:string) - Defaults to "Pagination Navigation".
  • link_fn (:any) (required) - function that takes a single argument of pagination params and returns a url or path link.
  • max_pages (:integer) - maximum number of pages to show at a time. Defaults to 7.
  • params (:map) (required) - map of the current pagination params (ex. %{"page" => 1, "page_size" => 10}).
  • total_count (:integer) (required) - total number of records in the list being paginated.

Slots

  • first - Accepts attributes:
    • class (:string) - gap-x-2 px-6 py-2 text-base.
  • last - Accepts attributes:
    • class (:string) - gap-x-2 px-6 py-2 text-base.
  • next - Accepts attributes:
    • class (:string) - gap-x-2 px-6 py-2 text-base.
  • page_links - Accepts attributes:
    • class (:string) - gap-x-2 px-6 py-2 text-base.
  • previous - Accepts attributes:
    • class (:string) - gap-x-2 px-6 py-2 text-base.