Pagination
ready

The Pagination component enables users to navigate through large sets of data by dividing content into discrete pages.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdPagination } from '@fbin-web/neighborhood-core';
<nbhd-pagination current-page="2" total-pages="10" max-visible-pages="3" surface="secondary">
</nbhd-pagination>

React 

import { NbhdPagination } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdPagination
      currentPage={2}
      totalPages={10}
      maxVisiblePages={3}
      surface="secondary"></NbhdPagination>
  </>
);

Properties

Property Attribute Type Default Description
surface surface none | primary | secondary | inverse | inverse-secondary primary Surface to apply to the 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
maxVisiblePages max-visible-pages number 3 The maximum number of page buttons to display at once
showLabels show-labels boolean false Whether to show labels on the pagination arrows
currentPage current-page number 1 The current active page
totalPages total-pages 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
onNbhdPageChanged on-nbhd-page-changed (event: CustomEvent<{ page: number }>) => void Callback function when page changes

Events

Name Description Event Detail
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
page-button Individual page number buttons for navigation.
ellipsis The ellipsis text elements ("...") shown between page ranges.
base The main component wrapper element.
controls The inner container that holds all pagination control elements.
previous-button The previous page navigation button.
pagination-item-svg The SVG arrow icons within the previous and next buttons.
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).

Dependencies

This component contains the following components as dependencies.