DevactionUI.Pagination (devaction_ui v0.2.3)

Copy Markdown View Source

Page links: previous, a window of numbers around the current one with the first and last page and an ellipsis where it skips, and next.

path is a function from a page number to the URL of that page. kind says how the link goes there: :patch (the default, inside the same LiveView), :navigate (to another LiveView) or :href (a plain link, for a controller page). A page outside 1..pages is clamped into it, so the current page never disappears. The previous and next links carry a 14px chevron (inline SVG, mirrored on a right-to-left page) that the previous_icon and next_icon slots replace.

<.pagination
  page={@page}
  pages={@pages}
  path={&~p"/pull-requests?page=#{&1}"}
  label="Pages"
  previous="Previous page"
  next="Next page"
>
  <:previous_icon><.icon name="arrow-left" class="size-3.5" /></:previous_icon>
  <:next_icon><.icon name="arrow-right" class="size-3.5" /></:next_icon>
</.pagination>

Summary

Functions

entries(page, pages)

The page numbers to draw, with :gap where pages are skipped: always the first, the last and one on each side of the current. A page outside 1..pages is clamped into it.

pagination(assigns)

The page links, or nothing when there is a single page.

Functions

entries(page, pages)

@spec entries(integer(), pos_integer()) :: [pos_integer() | :gap]

The page numbers to draw, with :gap where pages are skipped: always the first, the last and one on each side of the current. A page outside 1..pages is clamped into it.

pagination(assigns)

@spec pagination(map()) :: Phoenix.LiveView.Rendered.t()

The page links, or nothing when there is a single page.

Attributes

  • page (:integer) (required) - the current page, clamped into 1..pages.
  • pages (:integer) (required) - how many pages there are; with one or none nothing is drawn.
  • path (:any) (required) - a function: page number -> URL of that page.
  • kind (:atom) - how the links go to a page. Defaults to :patch. Must be one of :patch, :navigate, or :href.
  • label (:string) (required) - the name of the navigation, for assistive technology.
  • previous (:string) (required) - text for the previous link, for assistive technology.
  • next (:string) (required) - text for the next link, for assistive technology.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • previous_icon - replaces the 14px chevron of the previous link.
  • next_icon - replaces the 14px chevron of the next link.