File

projects/storefrontlib/shared/components/list-navigation/pagination/pagination.model.ts

Index

Properties

Properties

addDots
addDots: boolean
Type : boolean
Optional

Adds a gap before and after the pages. to visualize hidden pages. Defaults to false.

1 ... 4 (5) 6 ... 18

Defaults to false.

addEnd
addEnd: boolean
Type : boolean
Optional

A link to skip to the end of the pages, defaults to false.

addFirst
addFirst: boolean
Type : boolean
Optional

A link to the first page can be added in case it is not included already, defaults to false.

addLast
addLast: boolean
Type : boolean
Optional

A link to the last page can be added in case it is not included already, defaults to false.

addNext
addNext: boolean
Type : boolean
Optional

A link to the previous page, defaults to false.

addPrevious
addPrevious: boolean
Type : boolean
Optional

A link to the previous page, defaults to false.

addStart
addStart: boolean
Type : boolean
Optional

Adds a link to skip to the start of the pages, defaults to false.

dotsLabel
dotsLabel: string
Type : string
Optional

Custom label for the dots, defaults to ....

endLabel
endLabel: string
Type : string
Optional

Custom label for the end link, defaults to ».

navigationPosition
navigationPosition: PaginationNavigationPosition
Type : PaginationNavigationPosition
Optional
nextLabel
nextLabel: string
Type : string
Optional

Custom label for the next link, defaults to .

previousLabel
previousLabel: string
Type : string
Optional

Custom label for the previous link, defaults to .

rangeCount
rangeCount: number
Type : number
Optional

The range of direct accessible pages in the pagination.

« 4 (5) 6 »

Defaults to 3.

startLabel
startLabel: string
Type : string
Optional

Custom label for the start link, defaults to «.

substituteDotsForSingularPage
substituteDotsForSingularPage: boolean
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:

1 ... 3 (4) 5

we'd have

1 2 3 (4) 5.

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',
}

result-matching ""

    No results matching ""