glaze_oat/pagination

Oat documentation: https://oat.ink/components/pagination/

Pagination helpers for multi-page lists and tables.

Anatomy

A pagination control usually has page links plus previous/next controls, with the current page marked using aria-current="page".

Recipe

import glaze_oat/pagination
import lustre/attribute
import lustre/element/html

pagination.pagination([], [
  pagination.prev([attribute.href("?page=1")], [html.text("Previous")]),
  pagination.page_link([attribute.href("?page=1")], [html.text("1")]),
  pagination.current_page([attribute.href("?page=2")], [html.text("2")]),
  pagination.page_link([attribute.href("?page=3")], [html.text("3")]),
  pagination.next([attribute.href("?page=3")], [html.text("Next")]),
])

References

MDN aria-current: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

Values

current_page

</>

pub fn current_page(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render the active page link.

This marks the link with aria-current="page".

</>

pub fn next(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

page_link

</>

pub fn page_link(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

pagination

</>

pub fn pagination(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

</>

pub fn prev(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)