The pagination component provides navigational controls for paged content. It exposes a consistent structure for previous/next actions, individual page links, and an optional ellipsis for truncated ranges.
## Component Structure
```rust
// The Pagination component wraps the entire control.
Pagination {
// PaginationContent groups all items in a horizontal list.
PaginationContent {
// PaginationItem is the container for a single pagination element.
// Use one item at a time and swap the inner component as needed.
PaginationItem {
// PaginationPrevious renders a previous-page link.
// - Set href to your previous page url.
PaginationPrevious { href: "#" }
// PaginationLink renders a numbered page link.
// - is_active marks the current page.
// - href sets the target page.
PaginationLink { href: "#", is_active: true, "2" }
// PaginationEllipsis indicates truncated pages.
PaginationEllipsis {}
// PaginationNext renders a next-page link.
// - Set href to your next page url.
PaginationNext { href: "#" }
}
}
}
```
## Notes
- `PaginationLink` uses `is_active` to indicate the current page.
- `PaginationPrevious` and `PaginationNext` show labels on larger (non-mobile) screens; labels are hidden on smaller screens to keep the control compact.