PineUiPhoenix.Pagination (Pine UI v0.1.3)
View SourceProvides 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
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)
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)
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)