projects/storefrontlib/shared/components/list-navigation/pagination/pagination.model.ts
Properties |
|
addDots |
addDots:
|
Type : boolean
|
Optional |
Adds a gap before and after the pages. to visualize hidden pages. Defaults to false.
Defaults to false. |
addEnd |
addEnd:
|
Type : boolean
|
Optional |
A link to skip to the end of the pages, defaults to false. |
addFirst |
addFirst:
|
Type : boolean
|
Optional |
A link to the first page can be added in case it is not included already, defaults to false. |
addLast |
addLast:
|
Type : boolean
|
Optional |
A link to the last page can be added in case it is not included already, defaults to false. |
addNext |
addNext:
|
Type : boolean
|
Optional |
A link to the previous page, defaults to false. |
addPrevious |
addPrevious:
|
Type : boolean
|
Optional |
A link to the previous page, defaults to false. |
addStart |
addStart:
|
Type : boolean
|
Optional |
Adds a link to skip to the start of the pages, defaults to false. |
dotsLabel |
dotsLabel:
|
Type : string
|
Optional |
Custom label for the dots, defaults to |
endLabel |
endLabel:
|
Type : string
|
Optional |
Custom label for the end link, defaults to |
navigationPosition |
navigationPosition:
|
Type : PaginationNavigationPosition
|
Optional |
nextLabel |
nextLabel:
|
Type : string
|
Optional |
Custom label for the next link, defaults to |
previousLabel |
previousLabel:
|
Type : string
|
Optional |
Custom label for the previous link, defaults to |
rangeCount |
rangeCount:
|
Type : number
|
Optional |
The range of direct accessible pages in the pagination.
Defaults to 3. |
startLabel |
startLabel:
|
Type : string
|
Optional |
Custom label for the start link, defaults to |
substituteDotsForSingularPage |
substituteDotsForSingularPage:
|
Type : boolean
|
Optional |
If the page dots only represents a single page, we rather add the page as this would take the same amount of space. Some UX might want to use the dots for consistency reasons, which why this option is configurable. This typically happens on the 4th page (in case the range is 3): Instead of having: we'd have
Defaults to false. |
export interface PaginationItem {
label?: string;
type?: PaginationItemType;
/** The number is used when the type is {@link PaginationItemType.PAGE} */
number?: number;
}
/**
* The item type is used to add semantic structure to the
* PaginationItem, so that the UI understands the usage.
*/
export enum PaginationItemType {
GAP = 'gap',
FIRST = 'first',
LAST = 'last',
PREVIOUS = 'previous',
NEXT = 'next',
START = 'start',
END = 'end',
PAGE = 'page',
}
export interface PaginationOptions {
/**
* The range of direct accessible pages in the pagination.
*
* `« 4 (5) 6 »`
*
* Defaults to 3.
*/
rangeCount?: number;
/** Adds a link to skip to the start of the pages, defaults to false. */
addStart?: boolean;
/** A link to skip to the end of the pages, defaults to false. */
addEnd?: boolean;
/** A link to the previous page, defaults to false. */
addPrevious?: boolean;
/** A link to the previous page, defaults to false. */
addNext?: boolean;
navigationPosition?: PaginationNavigationPosition;
/** A link to the first page can be added in case it is not included already, defaults to false. */
addFirst?: boolean;
/** A link to the last page can be added in case it is not included already, defaults to false. */
addLast?: boolean;
/**
* Adds a gap before and after the pages. to visualize hidden pages. Defaults to false.
*
* `1 ... 4 (5) 6 ... 18`
*
* Defaults to false.
*/
addDots?: boolean;
/**
* If the page dots only represents a single page, we rather add the page
* as this would take the same amount of space. Some UX might want to use
* the dots for consistency reasons, which why this option is configurable.
*
* This typically happens on the 4th page (in case the range is 3):
* Instead of having:
*
* `1 ... 3 (4) 5`
*
* we'd have
*
* `1 2 3 (4) 5`.
*
* Defaults to false.
*/
substituteDotsForSingularPage?: boolean;
/** Custom label for the start link, defaults to `«`. */
startLabel?: string;
/** Custom label for the previous link, defaults to `‹`. */
previousLabel?: string;
/** Custom label for the next link, defaults to `›`. */
nextLabel?: string;
/** Custom label for the end link, defaults to `»`. */
endLabel?: string;
/** Custom label for the dots, defaults to `...`. */
dotsLabel?: string;
}
export enum PaginationNavigationPosition {
ASIDE = 'aside',
BEFORE = 'before',
AFTER = 'after',
}