DevactionUI.Pagination (devaction_ui v0.4.0)

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. On the first page the previous control stays, dimmed and aria-disabled and not a link (and the same for next on the last), so the row does not change width as the person pages. size: :sm draws 30px cells for the footer of a table.

<.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 range of the page (with total, per_page and summary_label) and the page links.

range(assigns)

The text of the range, or nil without the data to draw one.

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 range of the page (with total, per_page and summary_label) and the page links.

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.
  • size (:atom) - the cells are 38px, or 30px (:sm) for the footer of a table. Defaults to :md. Must be one of :md, or :sm.
  • class (:any) - Defaults to nil.
  • total (:integer) - how many items there are; with per_page and summary_label the range is drawn. Defaults to nil.
  • per_page (:integer) - Defaults to nil.
  • noun (:string) - what the items are, for __NOUN__ in summary_label. Defaults to nil.
  • summary_label (:string) - the range, e.g. __FROM__–__TO__ of __TOTAL__ __NOUN__. 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.

range(assigns)

@spec range(map()) :: String.t() | nil

The text of the range, or nil without the data to draw one.