PineUiPhoenix.Pagination (Pine UI v0.1.3)

View Source

Provides pagination components for navigating through pages of content.

The Pagination module offers components for creating pagination interfaces that help users navigate through multi-page content in a user-friendly way.

Summary

Functions

Renders a basic pagination component.

Renders a "load more" pagination component.

Renders a simple pagination component with prev/next buttons.

Functions

basic(assigns)

Renders a basic pagination component.

This component creates a pagination interface with page numbers and navigation controls.

Examples

<.basic
  current_page={5}
  total_pages={10}
  on_page_change="change_page"
/>

<.basic
  current_page={3}
  total_pages={20}
  sibling_count={2}
  show_first_last_buttons={true}
  variant="indigo"
/>

Options

  • :current_page - Current active page (required, 1-based index)
  • :total_pages - Total number of pages (required)
  • :sibling_count - Number of sibling pages to show on each side of current page (optional, defaults to 1)
  • :show_first_last_buttons - Whether to show first/last page buttons (optional, defaults to false)
  • :show_ellipsis - Whether to show ellipsis for hidden pages (optional, defaults to true)
  • :variant - Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo")
  • :size - Size of the pagination: "sm", "md", "lg" (optional, defaults to "md")
  • :class - Additional CSS classes for the pagination container (optional)
  • :item_class - CSS classes for the page items (optional)
  • :on_page_change - Event name or function for page change (optional)

load_more(assigns)

Renders a "load more" pagination component.

This component creates a button that loads additional content rather than using traditional pagination.

Examples

<.load_more
  current_page={2}
  total_pages={5}
  label="Load more results"
  on_load_more="load_more"
/>

Options

  • :current_page - Current active page (required, 1-based index)
  • :total_pages - Total number of pages (required)
  • :label - Text for the load more button (optional, defaults to "Load more")
  • :loading_label - Text shown when loading (optional, defaults to "Loading...")
  • :show_progress - Whether to show loading progress (optional, defaults to false)
  • :show_remaining - Whether to show count of remaining items (optional, defaults to false)
  • :items_per_page - Number of items loaded per page (optional, required if show_remaining is true)
  • :total_items - Total number of items (optional, required if show_remaining is true)
  • :loading - Whether loading is in progress (optional, defaults to false)
  • :variant - Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo")
  • :class - Additional CSS classes for the container (optional)
  • :button_class - CSS classes for the button (optional)
  • :on_load_more - Event name or function for loading more (optional)

simple(assigns)

Renders a simple pagination component with prev/next buttons.

This component creates a simpler pagination interface with just the essential navigation controls.

Examples

<.simple
  current_page={5}
  total_pages={10}
  on_page_change="change_page"
/>

Options

  • :current_page - Current active page (required, 1-based index)
  • :total_pages - Total number of pages (required)
  • :show_page_info - Whether to show current/total page info (optional, defaults to true)
  • :variant - Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo")
  • :size - Size of the pagination: "sm", "md", "lg" (optional, defaults to "md")
  • :class - Additional CSS classes for the pagination container (optional)
  • :on_page_change - Event name or function for page change (optional)