Pagination
A pagination with page navigation, next and previous links.
<script lang="ts">
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "coss-svelte";
</script>
<Pagination>
<PaginationContent>
<PaginationItem><PaginationPrevious href="#" /></PaginationItem>
<PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
<PaginationItem><PaginationEllipsis /></PaginationItem>
<PaginationItem><PaginationNext href="#" /></PaginationItem>
</PaginationContent>
</Pagination>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextButton, PaginationPage, PaginationPrevious, PaginationPrevButton } from "coss-svelte";Anatomy
- Pagination
- PaginationContent
- PaginationEllipsis
- PaginationItem
- PaginationLink
- PaginationNext
- PaginationNextButton
- PaginationPage
- PaginationPrevious
- PaginationPrevButton
API Reference
Pagination
A pagination with page navigation, next and previous links.
| Prop | Type | Default | Description |
|---|---|---|---|
bind:page | number | 2 | Current page. Bind with `bind:page`. |
pages | number | 5 | Total number of pages to render when count is not provided. |
count | number | totalPages | Total item count used to calculate pagination. |
perPage | number | - | Items per page used with count to calculate page totals. |
children : Snippet<[PaginationSnippetProps]>bind:ref : HTMLElement | nullInherits from Bits UI Pagination.Root.
PaginationContent
Wraps the primary content for the parent component.
children : Snippet<[]>Inherits from Svelte <ul> attributes.
PaginationEllipsis
Represents skipped pages in pagination.
children : Snippet<[]>Inherits from Svelte <span> attributes.
PaginationItem
Renders one selectable or repeated item.
children : Snippet<[]>Inherits from Svelte <li> attributes.
PaginationLink
Renders a link-styled navigation item.
| Prop | Type | Default | Description |
|---|---|---|---|
isActive | boolean | false | Marks the item as the current or selected navigation target. |
children : Snippet<[]>Inherits from Svelte <a> attributes.
PaginationNext
Renders navigation to the next page.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | "" | Renders the component as a link target when provided. |
children : Snippet<[]>Inherits from Svelte <span> attributes.
PaginationNextButton
Renders a button-shaped control for the parent component.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Pagination.NextButton.
PaginationPage
Renders one numbered page control.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Pagination.Page.
PaginationPrevious
Renders navigation to the previous page.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | "" | Renders the component as a link target when provided. |
children : Snippet<[]>Inherits from Svelte <span> attributes.
PaginationPrevButton
Renders a button-shaped control for the parent component.
children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | nullInherits from Bits UI Pagination.PrevButton.
Implementation Details
- Status
- Stable
- Foundation
- bits
- Category
- Layout & Navigation
- Particles
- 3