Pagination Search
ready
A pagination component with additional search sorting functionality.
Loading
Code
HTML
import { NbhdPaginationSearch } from '@fbin-web/neighborhood-core';<nbhd-pagination-search sort="relevance" term="faucet" current="1" total="10" visible-range="3" results="75"
background="secondary-light">
</nbhd-pagination-search>React
import { NbhdPaginationSearch } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdPaginationSearch
sort="relevance"
term="faucet"
current={1}
total={10}
visibleRange={3}
results={75}
background="secondary-light"></NbhdPaginationSearch>
</>
);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. | |
onSortChanged
|
on-sort-changed
|
(event: CustomEvent<{ value: string }>) => void
|
Callback function when sort option changes. | |
term
|
term
|
string
|
The current search term. | |
message
|
message
|
string
|
Search Results for
|
A message displayed alongside the search term. |
sort
|
sort
|
string
|
relevance
|
The current sort option. |
sortLabel
|
sort-label
|
string
|
Sort By:
|
The label for the sort select dropdown. |
results
|
results
|
number
|
0
|
The total number of search results. |
sortOptions
|
OptionData[]
|
[]
|
An array of sort options for the select dropdown. |
Option Structure
Structure for OptionData objects used in sortOptions array.
| Property | Type | Required | Description |
|---|---|---|---|
name
|
string
|
Yes | The display name/label for the option that appears in the dropdown. |
value
|
string
|
Yes | The value of the option that is used when the option is selected. |
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 } |
sort-changed
Deprecated
|
Emitted when the sort option changes. | { value: string } |
nbhd-sort-changed
|
Emitted when the sort option changes. | { value: string } |
CSS Parts
| Name | Description |
|---|---|
base
|
The component's base wrapper. |
container
|
The container element wrapping all content. |
wrapper
|
The wrapper element containing search message, pagination, and sort controls. |
search-title
|
The wrapper for the search message and results count. |
search-message
|
The text element displaying the search message. |
search-term
|
The text element displaying the search term. |
search-count
|
The text element displaying the results count. |
pagination
|
The pagination controls wrapper. |
controls
|
The container for pagination buttons and navigation controls. |
page-button
|
Individual page number buttons. |
previous-button
|
The previous page navigation button. |
next-button
|
The next page navigation button. |
previous-label
|
The text label for the previous button (when showLabels is true). |
next-label
|
The text label for the next button (when showLabels is true). |
ellipsis
|
The ellipsis (...) elements shown between page ranges. |
pagination-item-svg
|
The SVG icons for previous and next buttons. |
sort-options
|
The wrapper for the sort controls. |
sort-label
|
The label text for the sort dropdown. |
sort-select
|
The select dropdown for sort options. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-paginationSearch-inlineSize
|
100% |
--nbhd-paginationSearch-paddingBlock
|
var(--nbhd-space-5, 20px) |
--nbhd-paginationSearch-position
|
relative |
--nbhd-paginationSearch-zIndex
|
2 |
--nbhd-paginationSearchWrapper-alignItems
|
center |
--nbhd-paginationSearchWrapper-display
|
flex |
--nbhd-paginationSearchWrapper-flexDirection
|
column |
--nbhd-paginationSearchWrapper-flexWrap
|
wrap |
--nbhd-paginationSearchWrapper-gap
|
var(--nbhd-space-5, 20px) |
--nbhd-paginationSearchWrapper-inlineSize
|
100% |
--nbhd-paginationSearchWrapper-justifyContent
|
space-between |
--nbhd-paginationSearchTitle-alignItems
|
center |
--nbhd-paginationSearchTitle-display
|
flex |
--nbhd-paginationSearchTitle-gap
|
var(--nbhd-space-1, 4px) |
--nbhd-paginationSearchTitle-justifyContent
|
center |
--nbhd-paginationSearchTitle-maxInlineSize
|
content |
--nbhd-paginationSearchSort-minInlineSize
|
180px |
--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-alignItems
|
center |
--nbhd-paginationItem-backgroundColor
|
rgb(from var(--nbhd-paginationItem-backgroundColor-originColor) r g b / var(--nbhd-paginationItem-backgroundColor-alpha)) |
--nbhd-paginationItem-backgroundColor-alpha
|
0 |
--nbhd-paginationItem-backgroundColor-alpha-hover
|
0.05 |
--nbhd-paginationItem-backgroundColor-originColor
|
var(--nbhd-color-black) |
--nbhd-paginationItem-borderColor
|
transparent |
--nbhd-paginationItem-borderRadius
|
3px |
--nbhd-paginationItem-borderWidth
|
0 |
--nbhd-paginationItem-color
|
var(--nbhd-color-black) |
--nbhd-paginationItem-display
|
flex |
--nbhd-paginationItem-fontSize
|
var(--nbhd-fontSize-md, 18px) |
--nbhd-paginationItem-fontWeight
|
var(--nbhd-fontWeight-700, 700) |
--nbhd-paginationItem-justifyContent
|
center |
--nbhd-paginationItem-letterSpacing
|
normal |
--nbhd-paginationItem-lineHeight
|
normal |
--nbhd-paginationItem-minBlockSize
|
var(--nbhd-space-7, 28px) |
--nbhd-paginationItem-paddingBlock
|
var(--nbhd-space-1, 4px) |
--nbhd-paginationItem-paddingInline
|
var(--nbhd-space-1, 4px) |
--nbhd-paginationItem-textTransform
|
normal |
--nbhd-paginationItem-active-backgroundColor
|
var(--nbhd-color-black) |
--nbhd-paginationItem-active-color
|
var(--nbhd-color-white, #fff) |
--nbhd-paginationItemIcon-display
|
inline-block |
--nbhd-paginationItemLabel-display
|
inline-block |
--nbhd-paginationItemLabel-fontSize
|
var(--nbhd-font-size-regular, 1rem) |
--nbhd-paginationItemLabel-paddingInline
|
var(--nbhd-space-05, 2px) |
--nbhd-svgIcon-color
|
currentColor |
--nbhd-svgIcon-fill
|
currentColor |
--nbhd-svgIcon-inlineSize
|
100% |
--nbhd-svgIcon-maxBlockSize
|
6px |
--nbhd-svgIcon-maxInlineSize
|
10px |
--nbhd-svgIcon-transform
|
none |
Dependencies
This component contains the following components as dependencies.