Pagination
ready
The Pagination component enables users to navigate through large sets of data by dividing content into discrete pages.
Loading
Code
HTML
import { NbhdPagination } from '@fbin-web/neighborhood-core';<nbhd-pagination current="2" total="10" visible-range="3" background="secondary-light">
</nbhd-pagination>React
import { NbhdPagination } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdPagination
current={2}
total={10}
visibleRange={3}
background="secondary-light"></NbhdPagination>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
background
|
background
|
none | primary-light | secondary-light | primary-dark | secondary-dark
|
none
|
Background theme color for main component. |
marginTop
|
margin-top
|
none | small | medium | large
|
none
|
Top margin spacing. |
marginBottom
|
margin-bottom
|
none | small | medium | large
|
none
|
Bottom margin spacing. |
paddingTop
|
padding-top
|
default | none | small | medium | large
|
default
|
Top padding spacing. |
paddingBottom
|
padding-bottom
|
default | none | small | medium | large
|
default
|
Bottom padding spacing. |
showLabels
|
show-labels
|
boolean
|
false
|
Whether to show labels on the pagination arrows. |
currentPage
|
current
|
number
|
1
|
The current active page. |
totalPages
|
total
|
number
|
1
|
The total number of pages. |
visibleRange
|
visible-range
|
number
|
3
|
The number of page buttons to display at once. |
nextLabel
|
next-label
|
string
|
Next
|
The label for the next page arrow button. |
previousLabel
|
previous-label
|
string
|
Previous
|
The label for the previous page arrow button. |
onPageChanged
|
on-page-changed
|
(event: CustomEvent<{ page: number }>) => void
|
Callback function when page changes. |
Events
| Name | Description | Event Detail |
|---|---|---|
page-changed
Deprecated
|
Emitted when the user navigates to a different page. | { page: number } |
nbhd-page-changed
|
Emitted when the user navigates to a different page. | { page: number } |
CSS Parts
Exposed CSS parts for styling specific elements within the pagination component.
| Name | Description |
|---|---|
base
|
The main component wrapper element. |
controls
|
The inner container that holds all pagination control elements. |
page-button
|
Individual page number buttons for navigation. |
ellipsis
|
The ellipsis text elements ("...") shown between page ranges. |
previous-button
|
The previous page navigation button. |
previous-label
|
The text label for the previous button (when showLabels is true). |
next-button
|
The next page navigation button. |
next-label
|
The text label for the next button (when showLabels is true). |
pagination-item-svg
|
The SVG arrow icons within the previous and next buttons. |
CSS Properties
CSS custom properties available for component customization and theming.
| Property | Default Value |
|---|---|
--nbhd-pagination-display
|
flex |
--nbhd-pagination-fontFamily
|
inherit |
--nbhd-pagination-inlineSize
|
100% |
--nbhd-pagination-justifyContent
|
center |
--nbhd-pagination-marginInline
|
0 |
--nbhd-pagination-paddingInline
|
0 |
--nbhd-pagination-paddingBlock
|
var(--nbhd-space-1, 4px) |
--nbhd-paginationControls-alignItems
|
center |
--nbhd-paginationControls-display
|
flex |
--nbhd-paginationControls-gap
|
var(--nbhd-space-2, 8px) |
--nbhd-paginationControls-justifyContent
|
center |
--nbhd-paginationControls-whiteSpace
|
nowrap |
--nbhd-paginationItem-backgroundColor-alpha
|
0 |
--nbhd-paginationItem-backgroundColor-alpha-hover
|
0.05 |
--nbhd-paginationItem-backgroundColor-alpha-hover-dark
|
0.20 |
--nbhd-paginationItem-backgroundColor-originColor
|
var(--nbhd-color-black) |
--nbhd-paginationItem-backgroundColor-originColor-dark
|
var(--nbhd-color-white) |
--nbhd-paginationItem-backgroundImage
|
none |
--nbhd-paginationItem-borderColor
|
transparent |
--nbhd-paginationItem-borderColor-dark
|
transparent |
--nbhd-paginationItem-borderRadius
|
3px |
--nbhd-paginationItem-borderWidth
|
0 |
--nbhd-paginationItem-color
|
var(--nbhd-color-black) |
--nbhd-paginationItem-color-dark
|
var(--nbhd-color-white) |
--nbhd-paginationItem-color-hover
|
var(--nbhd-color-black) |
--nbhd-paginationItem-color-hover-dark
|
var(--nbhd-color-white) |
--nbhd-paginationItem-display
|
flex |
--nbhd-paginationItem-fontSize
|
var(--nbhd-fontSize-md, 18px) |
--nbhd-paginationItem-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-paginationItem-letterSpacing
|
normal |
--nbhd-paginationItem-lineHeight
|
normal |
--nbhd-paginationItem-paddingInline
|
var(--nbhd-space-1, 4px) |
--nbhd-paginationItem-paddingBlock
|
var(--nbhd-space-1, 4px) |
--nbhd-paginationItem-textTransform
|
normal |
--nbhd-paginationItem-alignItems
|
center |
--nbhd-paginationItem-justifyContent
|
center |
--nbhd-paginationItem-minBlockSize
|
var(--nbhd-space-7, 28px) |
--nbhd-paginationItem-active-backgroundColor
|
var(--nbhd-color-black) |
--nbhd-paginationItem-active-backgroundColor-dark
|
var(--nbhd-color-white) |
--nbhd-paginationItem-active-color
|
var(--nbhd-color-white, #fff) |
--nbhd-paginationItem-active-color-dark
|
var(--nbhd-color-black) |
--nbhd-paginationItemIcon-display
|
inline-block |
--nbhd-paginationItemLabel-display
|
inline-block |
--nbhd-paginationItemLabel-paddingInline
|
var(--nbhd-space-05, 2px) |
--nbhd-paginationItemLabel-fontSize
|
var(--nbhd-font-size-regular, 1rem) |
--nbhd-paginationEllipsis-color
|
var(--nbhd-color-black, #000) |
--nbhd-paginationEllipsis-color-dark
|
var(--nbhd-color-white) |
--nbhd-paginationEllipsis-fontSize
|
var(--nbhd-fontSize-md) |
--nbhd-paginationEllipsis-fontWeight
|
var(--nbhd-fontWeight-400, 400) |
--nbhd-svgIcon-color
|
currentColor |
--nbhd-svgIcon-fill
|
currentColor |
--nbhd-svgIcon-inlineSize
|
100% |
--nbhd-svgIcon-maxInlineSize
|
10px |
--nbhd-svgIcon-maxBlockSize
|
6px |
--nbhd-svgIcon-transform
|
none |