Components / Pagination

Pagination

Pagination with page navigation, next and previous links. Pure Tailwind composed from a handful of parts: the active page uses the outline button style, the rest use ghost.

Examples

razor

<ZitsPagination>
    <ZitsPaginationContent>
        <ZitsPaginationItem>
            <ZitsPaginationPrevious Href="#" />
        </ZitsPaginationItem>
        <ZitsPaginationItem>
            <ZitsPaginationLink Href="#">1</ZitsPaginationLink>
        </ZitsPaginationItem>
        <ZitsPaginationItem>
            <ZitsPaginationLink Href="#" IsActive="true">2</ZitsPaginationLink>
        </ZitsPaginationItem>
        <ZitsPaginationItem>
            <ZitsPaginationLink Href="#">3</ZitsPaginationLink>
        </ZitsPaginationItem>
        <ZitsPaginationItem>
            <ZitsPaginationEllipsis />
        </ZitsPaginationItem>
        <ZitsPaginationItem>
            <ZitsPaginationNext Href="#" />
        </ZitsPaginationItem>
    </ZitsPaginationContent>
</ZitsPagination>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add pagination

API reference

ZitsPaginationLink is the styled page link; the props below are its surface. The other parts (ZitsPagination, ZitsPaginationContent, ZitsPaginationItem, ZitsPaginationPrevious, ZitsPaginationNext, ZitsPaginationEllipsis) are thin layout wrappers that accept ChildContent and any HTML attributes.

Prop	Type	Default
IsActive	bool	false
Size	string	"icon"
Href	string?	"#"
ChildContent	RenderFragment?	-