Beacon.LiveAdmin.StationUI.HTML.Pagination (Beacon LiveAdmin v0.4.0)
View SourceSummary
Functions
The pagination component renders clickable numbered elements to progress through content that spans multiple pages.
Functions
The pagination component renders clickable numbered elements to progress through content that spans multiple pages.
The default size for each pagination button is "md" but the size can be changed by supplying the
class
attribute to each slot.
Suggested size classes: xl: gap-x-4 px-8 py-3 text-4xl lg:focus-visible:ring-4 lg: gap-x-4 px-7 py-2.5 text-2xl md: gap-x-2 px-6 py-2 text-base sm: gap-x-2 px-5 py-2 text-sm xs: gap-x-2 px-4 py-2 text-xs
Example Usage
Example contents of a LiveView for the ~p"/posts"
route:
@impl true
def mount(_params, _session, socket) do
{:ok, socket}
end
@impl true
def handle_params(params, _url, socket) do
{:noreply, assign_paginated_posts(socket, params)}
end
defp assign_paginated_posts(socket, params) do
page = get_pagination_param(params, "page", 1)
page_size = get_pagination_param(params, "page_size", 10)
offset = (page - 1) * page_size
socket
|> assign(:pagination_params, %{"page" => page, "page_size" => page_size})
|> assign(:posts, Posts.list_posts(offset: offset, limit: page_size))
|> assign(:posts_count, Posts.count_posts())
end
defp get_pagination_param(params, param, default) do
value = to_string(params[param] || default)
case Integer.parse(value) do
{page, _} -> max(page, 1)
_ -> default
end
end
Example usage in the rendered template:
<.pagination
link_fn={&~p"/posts?#{&1}"}
params={@pagination_params}
total_count={@posts_count}
>
<:first>
<.icon class="h-5 w-5" name="hero-chevron-double-left-solid" />
First
</:first>
<:previous>
<.icon class="h-4 w-4" name="hero-chevron-left-solid" />
<span class="sr-only">Prev</span>
</:previous>
<:page_links />
<:next>
<span class="sr-only">Next</span>
<.icon class="h-4 w-4" name="hero-chevron-right-solid" />
</:next>
<:last>
Last
<.icon class="h-5 w-5" name="hero-chevron-double-right-solid" />
</:last>
</.pagination>
Attributes
class
(:string
) - Defaults to"inline-flex gap-x-2.5"
.id
(:string
) - required if more than one pagination component is on a single page. Defaults to"pagination-component"
.label
(:string
) - Defaults to"Pagination Navigation"
.link_fn
(:any
) (required) - function that takes a single argument of pagination params and returns a url or path link.max_pages
(:integer
) - maximum number of pages to show at a time. Defaults to7
.params
(:map
) (required) - map of the current pagination params (ex.%{"page" => 1, "page_size" => 10}
).total_count
(:integer
) (required) - total number of records in the list being paginated.
Slots
first
- Accepts attributes:class
(:string
) - gap-x-2 px-6 py-2 text-base.
last
- Accepts attributes:class
(:string
) - gap-x-2 px-6 py-2 text-base.
next
- Accepts attributes:class
(:string
) - gap-x-2 px-6 py-2 text-base.
page_links
- Accepts attributes:class
(:string
) - gap-x-2 px-6 py-2 text-base.
previous
- Accepts attributes:class
(:string
) - gap-x-2 px-6 py-2 text-base.