DocsComponentsPagination

Pagination

Links to the pages of a list.

7 files

<pb-ui.pagination>
  <pb-ui.pagination-content>
    <pb-ui.pagination-item><pb-ui.pagination-previous href="#" label="Previous" /></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-link href="#">1</pb-ui.pagination-link></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-link href="#" active>2</pb-ui.pagination-link></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-link href="#">3</pb-ui.pagination-link></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-ellipsis /></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-next href="#" label="Next" /></pb-ui.pagination-item>
  </pb-ui.pagination-content>
</pb-ui.pagination>

Installation

pyblade-ui add pagination

Copy these files into your project

components/ui/pagination.html

<nav role="navigation" aria-label="pagination" data-slot="pagination" {{ attributes.cn("mx-auto flex w-full justify-center") }}>{{ slot }}</nav>

components/ui/pagination_content.html

<ul data-slot="pagination-content" {{ attributes.cn("flex flex-row items-center gap-1") }}>{{ slot }}</ul>

components/ui/pagination_item.html

<li data-slot="pagination-item" {{ attributes.cn("") }}>{{ slot }}</li>

components/ui/pagination_link.html

@props({'href': '#', 'active': False})
<a href="{{ href }}" data-slot="pagination-link" data-active="{{ str(bool(active)).lower() }}" @if(active)aria-current="page"@endif {{ attributes.cn(
    "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 size-9",
    {
        'True': 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30',
        'False': 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
    }[str(bool(active))],
) }}>{{ slot }}</a>

components/ui/pagination_previous.html

@props({'href': '#', 'label': 'Previous'})
<a href="{{ href }}" aria-label="Go to previous page" data-slot="pagination-previous" {{ attributes.cn("inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-9 px-2.5 hover:bg-accent hover:text-accent-foreground sm:pl-2.5 dark:hover:bg-accent/50") }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg><span class="hidden sm:block">{{ label }}</span></a>

components/ui/pagination_next.html

@props({'href': '#', 'label': 'Next'})
<a href="{{ href }}" aria-label="Go to next page" data-slot="pagination-next" {{ attributes.cn("inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-9 px-2.5 hover:bg-accent hover:text-accent-foreground sm:pr-2.5 dark:hover:bg-accent/50") }}><span class="hidden sm:block">{{ label }}</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></a>

components/ui/pagination_ellipsis.html

<span aria-hidden="true" data-slot="pagination-ellipsis" {{ attributes.cn("flex size-9 items-center justify-center [&>svg]:size-4") }}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg><span class="sr-only">More pages</span></span>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.pagination> <pb-ui.pagination-content> <pb-ui.pagination-item> <pb-ui.pagination-link> <pb-ui.pagination-previous> <pb-ui.pagination-next> <pb-ui.pagination-ellipsis> are available in all your templates.

<pb-ui.pagination>
  <pb-ui.pagination-content>
    <pb-ui.pagination-item><pb-ui.pagination-previous href="?page=1" /></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-link href="?page=1">1</pb-ui.pagination-link></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-link href="?page=2" active>2</pb-ui.pagination-link></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-ellipsis /></pb-ui.pagination-item>
    <pb-ui.pagination-item><pb-ui.pagination-next href="?page=3" /></pb-ui.pagination-item>
  </pb-ui.pagination-content>
</pb-ui.pagination>

Props

<pb-ui.pagination-link>

Prop	Default
href	'#'
active	False

<pb-ui.pagination-previous>

Prop	Default
href	'#'
label	'Previous'

<pb-ui.pagination-next>

Prop	Default
href	'#'
label	'Next'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Breadcrumb Tabs ›