mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
fd72ad7430
* docs: add API Reference sections to all component documentation - Add comprehensive API Reference sections to 36 component docs - Document custom props, variants, and behaviors for each component - Distinguish between Base UI aliases and custom components - Include prop tables with Type, Default, and Description columns - Follow alert-dialog.mdx as the reference standard for quality Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: add essential inline examples and 'Also exported as' notes - Add inline code example for Menu's inset prop showing alignment pattern - Add 'Also exported as ToggleGroupItem' note to Toggle component - Add ToggleGroupSeparator to toggle-group documentation - Add 'Also exported as RadioGroupItem' note to Radio component Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix section ordering - API Reference before Examples Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: remove references to non-exported components Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix inaccurate API documentation per Cubic AI review Co-Authored-By: pasquale@cal.com <pasquale@cal.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com>
110 lines
2.5 KiB
Plaintext
110 lines
2.5 KiB
Plaintext
---
|
|
title: Pagination
|
|
description: A pagination with page navigation, next and previous links.
|
|
---
|
|
|
|
<ComponentPreview name="p-pagination-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/pagination
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="pagination" title="components/ui/pagination.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination"
|
|
```
|
|
|
|
```tsx
|
|
<Pagination>
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious href="#" />
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationLink href="#">1</PaginationLink>
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationEllipsis />
|
|
</PaginationItem>
|
|
<PaginationItem>
|
|
<PaginationNext href="#" />
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
```
|
|
|
|
## API Reference
|
|
|
|
This is a custom component, not a Base UI wrapper.
|
|
|
|
### Pagination
|
|
|
|
Root navigation container with `role="navigation"` and `aria-label="pagination"`.
|
|
|
|
### PaginationContent
|
|
|
|
Unordered list container for pagination items.
|
|
|
|
### PaginationItem
|
|
|
|
Individual list item container.
|
|
|
|
### PaginationLink
|
|
|
|
Link element for page numbers. Supports the `render` prop.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ---------- | ------------------------------------- | ----------- | ------------------------------------------------ |
|
|
| `isActive` | `boolean` | - | Highlights the link as the current page |
|
|
| `size` | `"default" \| "icon"` | `"icon"` | Controls the link size |
|
|
| `render` | `React.ReactElement` | - | Render as a different element (e.g., Next.js Link) |
|
|
|
|
### PaginationPrevious
|
|
|
|
Link to the previous page. Includes a chevron left icon and "Previous" text.
|
|
|
|
### PaginationNext
|
|
|
|
Link to the next page. Includes "Next" text and a chevron right icon.
|
|
|
|
### PaginationEllipsis
|
|
|
|
Ellipsis indicator for skipped pages. Displays "..." with screen reader text "More pages".
|