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> pagination </nbhd-pagination>React
import { NbhdPagination } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdPagination>pagination</NbhdPagination>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
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. |
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. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-pagination-display
|
flex |
--nbhd-pagination-fontFamily
|
inherit |
--nbhd-pagination-inlineSize
|
100% |
--nbhd-pagination-justifyContent
|
center |
--nbhd-pagination-marginInline
|
var(--nbhd-spacing-0, 0) |
--nbhd-pagination-paddingInline
|
var(--nbhd-spacing-0, 0) |
--nbhd-pagination-paddingBlock
|
var(--nbhd-spacing-1, 4px) |
--nbhd-paginationControls-alignItems
|
center |
--nbhd-paginationControls-display
|
flex |
--nbhd-paginationControls-gap
|
var(--nbhd-spacing-2, 8px) |
--nbhd-paginationControls-justifyContent
|
center |
--nbhd-paginationControls-whiteSpace
|
nowrap |
--nbhd-
|
|
--nbhd-paginationItem-borderRadius
|
0 |
--nbhd-paginationItem-borderWidth
|
0 |
--nbhd-paginationItem-display
|
flex |
--nbhd-paginationItem-fontSize
|
var(--nbhd-font-size-md, 18px) |
--nbhd-paginationItem-fontWeight
|
var(--nbhd-font-weight-700, 700) |
--nbhd-paginationItem-justifyContent
|
center |
--nbhd-paginationItem-letterSpacing
|
normal |
--nbhd-paginationItem-lineHeight
|
normal |
--nbhd-paginationItem-minBlockSize
|
32px |
--nbhd-paginationItem-inlineSize
|
32px |
--nbhd-paginationItem-marginInline
|
0 |
--nbhd-paginationItem-paddingInline
|
0 |
--nbhd-paginationItem-textAlign
|
center |
--nbhd-paginationItem-transition
|
background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out |
--nbhd-paginationItem-variant
|
tertiary |