Pagination

Overview Style Guidelines Code Demos Accessibility

Usage
rh-pagination

Usage
rh-pagination

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN

<script type="module">
  import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>

Import Map Example

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>

NPM

npm install @rhds/elements

<script type="module">
  import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>

JSPM

<script type="module">
  import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>

Import Map Example

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-pagination/rh-pagination.js": "./elements/rh-pagination/rh-pagination.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/"
    }
  }
}
</script>

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

<link rel="stylesheet" href="/path/to/rh-pagination/rh-pagination-lightdom.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Usage

<rh-pagination>
  <ol>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
  </ol>
</rh-pagination>

rh-pagination

Slots 3

Slot Name	Description
	An ordered list of links
`go-to-page`	"Go to page" text, defaults to "Page"
`out-of`	"of" text

Attributes 8

Attribute	DOM Property	Description	Type	Default
`overflow`	`overflow`	Override `overflow` values set from HTML or JS. `overflow` should ideally be private, but because we can't do `::slotted(nav ol li)`, we need to reflect it to a host attribute, so that lightdom CSS can target the list items.	`'start' \| 'end' \| 'both' \| null`	`null`
`label`	`label`	Accessible label for the 'nav' element	`string`	`'Page navigation'`
`label-first`	`labelFirst`	Accessible label for the 'first page' button	`string`	`'first page'`
`label-previous`	`labelPrevious`	Accessible label for the 'previous page' button	`string`	`'previous page'`
`label-next`	`labelNext`	Accessible label for the 'next page' button	`string`	`'next page'`
`label-last`	`labelLast`	Accessible label for the 'last page' button	`string`	`'last page'`
`size`	`size`	Change pagination size to small	`'sm' \| null`	`null`
`variant`	`variant`	"Open" variant	`'open' \| null \| undefined`	`null`

Methods 5

Method Name	Description
`first()`	Navigate to the first page
`prev()`	Navigate to the previous page
`next()`	Navigate to the next page
`last()`	Navigate to the last page
`go(page: 'first' \| 'prev' \| 'next' \| 'last' \| number)`	Navigate to a specific page

Events 0

None

CSS Shadow Parts 4

Part Name	Description
`container`	pagination container
`numeric-middle`	container for the numeric control at medium screen widths
`numeric-end`	container for the numeric control at small and large screen widths
`numeric`	shared container for the numeric controls at all widths

CSS Custom Properties 3

CSS Property	Description	Default
`--rh-pagination-accent-color`	Sets the outline color when the page input has focus.	`var(--rh-color-interactive-blue, #0066cc)`
`--rh-pagination-background-focused`	Sets the disabled stepper color.	`var(--rh-color-gray-20, #c7c7c7)`
`--rh-pagination-stepper-color`	Sets the stepper color.	`var(--rh-color-icon-subtle, #707070)`

Design Tokens 37

Token	Copy
`--rh-border-radius-default`
`--rh-border-width-lg`
`--rh-border-width-md`
`--rh-border-width-sm`
`--rh-color-border-interactive`
`--rh-color-border-subtle`
`--rh-color-border-subtle-on-light`
`--rh-color-gray-30`
`--rh-color-gray-40`
`--rh-color-gray-50`
`--rh-color-gray-60`
`--rh-color-interactive-primary-default`
`--rh-color-interactive-primary-hover`
`--rh-color-interactive-primary-visited-default`
`--rh-color-interactive-primary-visited-hover`
`--rh-color-red-40`
`--rh-color-red-60`
`--rh-color-surface-dark-alt`
`--rh-color-surface-darkest`
`--rh-color-surface-lighter`
`--rh-color-surface-lightest`
`--rh-color-text-primary`
`--rh-color-text-primary-on-dark`
`--rh-color-text-secondary-on-dark`
`--rh-font-family-heading`
`--rh-font-size-body-text-lg`
`--rh-font-size-body-text-md`
`--rh-font-size-body-text-xl`
`--rh-font-size-heading-xs`
`--rh-length-2xl`
`--rh-length-3xl`
`--rh-length-4xl`
`--rh-space-2xl`
`--rh-space-lg`
`--rh-space-md`
`--rh-space-sm`
`--rh-space-xs`

Edit this page on GitHub

Other libraries

Feedback