SutraUI.Pagination (Sutra UI v0.2.0)

View Source

Pagination with page navigation, next and previous links.

Provides a complete pagination UI with support for first/last page, previous/next navigation, and page number links.

Examples

<.pagination
  page={@page}
  total_pages={@total_pages}
  on_page_change="page_changed"
/>

<.pagination
  page={@page}
  total_pages={@total_pages}
  sibling_count={2}
>
  <:previous>Previous</:previous>
  <:next>Next</:next>
</.pagination>

Accessibility

  • Uses <nav> element with aria-label="Pagination"
  • Current page marked with aria-current="page"
  • Disabled buttons properly marked

Summary

Functions

pagination(assigns)

Renders a pagination component.

Functions

pagination(assigns)

Renders a pagination component.

Attributes

  • page (:integer) (required) - Current page number (1-indexed).
  • total_pages (:integer) (required) - Total number of pages.
  • sibling_count (:integer) - Number of sibling pages to show on each side of current page. Defaults to 1.
  • on_page_change (:string) - Event name to send when page changes (sends page number). Defaults to nil.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • previous - Custom content for previous button.
  • next - Custom content for next button.