Pagination Search
ready
A pagination component with additional search sorting functionality.
Loading
Code
HTML
import { NbhdPaginationSearch } from '@fbin-web/neighborhood-core';<nbhd-pagination-search> pagination-bar </nbhd-pagination-search>React
import { NbhdPaginationSearch } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdPaginationSearch>pagination-search</NbhdPaginationSearch>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
Required
|
object
|
An object containing pagination data, including current page, total pages, and maximum amount of page buttons to display. | ||
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
|
array
|
An array of sort options for the select dropdown. |
Pagination Search Bar Data
Main data structure expected by the component for page information.
| Property | Type | Description |
|---|---|---|
| currentPage |
number
|
The current page number. |
| totalPages |
number
|
The total number of pages. |
| maxPageButtons |
number
|
The maximum number of page buttons to display at once. |
Slots
| Name | Description |
|---|---|
| default | Content area. |
CSS Parts
| Name | Description |
|---|---|
| base | The component's base wrapper. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-element
|
default |
Dependencies
This component contains the following components as dependencies.