EccUtilsDesignPagination Component
Overview
The ecc-utils-design-pagination component provides a set of components to build custom pagination controls. It is a compound component, giving you full control over the layout and behavior of your pagination interface.
This component is unopinionated and provides the building blocks. You are responsible for implementing the state management and logic for page changes.
Usage
Basic Pagination
This example shows a typical pagination layout with previous/next buttons, page numbers, and an ellipsis.
Components
| Component | Tag Name | Description |
|---|---|---|
Pagination | ecc-utils-design-pagination | The root container for pagination. |
PaginationContent | ecc-utils-design-pagination-content | A container for the pagination items. |
PaginationItem | ecc-utils-design-pagination-item | A list item for pagination elements. |
PaginationLink | ecc-utils-design-pagination-link | A link for a specific page number. |
PaginationPrevious | ecc-utils-design-pagination-previous | A button to navigate to the previous page. |
PaginationNext | ecc-utils-design-pagination-next | A button to navigate to the next page. |
PaginationEllipsis | ecc-utils-design-pagination-ellipsis | A separator indicating omitted page numbers. |
Properties
EccUtilsDesignPaginationLink
| Property | Type | Default | Description |
|---|---|---|---|
isActive | boolean | false | When true, styles the link as active. |
size | string | icon | The size of the link button. |
href | string | # | The URL the link points to. |
isActive
Visually indicates which page is currently active by applying active styling.
<EccUtilsDesignPaginationLink isActive={true}>2</EccUtilsDesignPaginationLink>size
Controls the size of the pagination link button.
<EccUtilsDesignPaginationLink size="default">1</EccUtilsDesignPaginationLink>href
The URL that the pagination link points to. Useful for server-side pagination.
<EccUtilsDesignPaginationLink href="/page/2">2</EccUtilsDesignPaginationLink>EccUtilsDesignPaginationPrevious & EccUtilsDesignPaginationNext
| Property | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | When true, disables the button. |
disabled
When true, disables the previous/next button, typically used when at the first or last page.
<EccUtilsDesignPaginationPrevious disabled={true} />
<EccUtilsDesignPaginationNext disabled={true} />Events
The PaginationLink, PaginationPrevious, and PaginationNext components emit an ecc-button-clicked event when clicked. You can use this to handle page navigation.
| Event Name | React Event Name | Detail Type | Description |
|---|---|---|---|
ecc-button-clicked | onEccButtonClicked | { variant: string } | Fired when a pagination button is clicked. |
ecc-button-clicked
Fires when a user clicks on a pagination control. The variant in the event detail will be link, previous, or next.
<EccUtilsDesignPaginationNext
onEccButtonClicked={(event) => {
console.log('Next button clicked');
}}
/>
