Paging
The container for managing the actively viewed page of search results.
Provided Aliases: $paging
Example
const labels = {
first: '«',
last: '»',
prev: '‹',
next: '›'
};
<gb-paging labels="{ labels }"></gb-paging>
Properties
All of these are optional.
| Property | Type | Default | Notes |
|---|---|---|---|
showLabels |
boolean | true |
Set to false to hide the labels. |
numericLabels |
boolean | false |
Set to true to use numeric values for page numbers instead of labels. |
labels.first |
string | 'First' |
The label for the control that returns user to the first page of search results. |
labels.last |
string | 'Last' |
The label for the control that brings the user to the last page of search results. |
labels.prev |
string | 'Prev' |
The label for the control that returns user to the previous page of search results. |
labels.next |
string | 'Next' |
The label for the control that brings the user to the next page of search results. |
limit |
number | 5 |
The maximum number of pages to show at once. |
State
| Property | Type | Default | Notes |
|---|---|---|---|
highOverflow |
boolean | false |
Determines whether ellipsis should be shown on the right side of <gb-pages> to indicate hidden page numbers above the current range. |
lowOverflow |
boolean | false |
Determines whether ellipsis should be shown on the left side of <gb-pages> to indicate hidden page numbers below the current range. |
backDisabled |
boolean | true |
Indicates whether or not paging backward is possible. When true, previous and first paging options will be disabled. |
forwardDisabled |
boolean | false |
Indicates whether or not paging forward is possible. When true, next and last paging options will be disabled. |
range |
number[] | [] |
An array of all page numbers that should be displayed by <gb-pages>. |
firstPage() |
function | Sends an action to request the first page of results. | |
lastPage() |
function | Sends an action to request the last page of results. | |
prevPage() |
function | Sends an action to request the previous page of results. | |
nextPage() |
function | Sends an action to request the next page of results. | |
switchPage(page) |
function | Sends an action to request results for the specified page number. |
Events
| Event | Affected State Properties |
|---|---|
'page_updated' |
backDisabled, current, first, forwardDisabled, from, highOverflow, icons, labels, last, limit, lowOverflow, next, numericLabels, previous, range, showIcons, showLabels, sizes, to |