Pagination
Pagination with page navigation, next, and previous links.
use leptos::prelude::*; use singlestage::pagination::*; #[component] pub fn PaginationExample() -> impl IntoView { view! { <Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious href="">"Previous"</PaginationPrevious> </PaginationItem> <PaginationItem> <PaginationLink href="#">"1"</PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#" active=true> "2" </PaginationLink> </PaginationItem> <PaginationItem> <PaginationLink href="#">"3"</PaginationLink> </PaginationItem> <PaginationItem> <PaginationEllipsis /> </PaginationItem> <PaginationItem> <PaginationNext href="#">"Next"</PaginationNext> </PaginationItem> </PaginationContent> </Pagination> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::pagination::*; #[component] pub fn PaginationAnatomy() -> impl IntoView { view! { <Pagination> <PaginationContent> <PaginationItem> <PaginationPrevious /> <PaginationLink /> <PaginationEllipsis /> <PaginationNext /> </PaginationItem> </PaginationContent> </Pagination> } }
API Reference
PaginationLink
A pagination link.
Name | Type | Default | Description |
---|---|---|---|
active | bool | false | Toggle whether or not this button should render with active styling. |