Renders a load more button.

Examples

<.load_more phx-click="load_more" count="25 of 250" />
<.load_more is_loading phx-click="load_more">Loading...</.load_more>
<.load_more align="start" phx-click="load_more">Show More Items</.load_more>

Attributes

• is_loading (:boolean) - Defaults to false.
• count (:string) - Count text, e.g. '25 of 250'. Defaults to nil.
• align (:string) - Defaults to nil.Must be one of nil, "start", "center", or "end".
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["phx-click"].

Slots

• inner_block

Renders a pagination control.

Icons

The four navigation icons default to Unicode chevrons («‹›»). Override them with either a plain string (rendered as escaped text) or a slot (for arbitrary markup like a Font Awesome icon or inline SVG).

Examples

<.pager page={@page} total_pages={@total_pages} on_previous="prev_page" on_next="next_page" />

<.pager page={3} total_pages={10} on_previous="prev" on_next="next" on_first="first" on_last="last" />

<.pager page={1} total_pages={10} align="end" info_text="Showing 1-25 of 250" />

<.pager page={@page} total_pages={@total}>
  <:previous_icon><i class="fa-solid fa-angle-left"></i></:previous_icon>
  <:next_icon><i class="fa-solid fa-angle-right"></i></:next_icon>
</.pager>

Attributes

• page (:integer) - Defaults to 1.
• total_pages (:integer) - Defaults to 1.
• align (:string) - Defaults to nil.Must be one of nil, "start", "center", or "end".
• show_page_input (:boolean) - Show page number input. Defaults to true.
• show_info (:boolean) - Show info section. Defaults to true.
• info_text (:string) - Custom info text (overrides page X of Y). Defaults to nil.
• on_previous (:string) - Event for previous button. Defaults to "prev-page".
• on_next (:string) - Event for next button. Defaults to "next-page".
• on_first (:string) - Event for first button (nil = hidden). Defaults to nil.
• on_last (:string) - Event for last button (nil = hidden). Defaults to nil.
• on_page_change (:string) - Event for page input change. Defaults to nil.
• icon_first (:string) - First page button icon (plain text; rendered HTML-escaped). For markup, use the first_icon slot. Defaults to "«".
• icon_previous (:string) - Previous page button icon (plain text; rendered HTML-escaped). For markup, use the previous_icon slot. Defaults to "‹".
• icon_next (:string) - Next page button icon (plain text; rendered HTML-escaped). For markup, use the next_icon slot. Defaults to "›".
• icon_last (:string) - Last page button icon (plain text; rendered HTML-escaped). For markup, use the last_icon slot. Defaults to "»".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• controls - Custom controls (overrides default buttons).
• info - Custom info content (overrides default info).
• first_icon - Custom first-page icon markup (overrides icon_first attr).
• previous_icon - Custom previous-page icon markup (overrides icon_previous attr).
• next_icon - Custom next-page icon markup (overrides icon_next attr).
• last_icon - Custom last-page icon markup (overrides icon_last attr).