Pagination
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Lightdom CSS
This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.
Note
Replace /path/to/
with path to the CSS file, whether local or CDN.
<link rel="stylesheet" href="/path/to/rh-pagination/rh-pagination-lightdom.css">
Usage
<rh-pagination>
<ol>
<li><a href="#">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>
<link rel="stylesheet" href="../rh-pagination-lightdom.css">
<script type="module">
import '@rhds/elements/rh-pagination/rh-pagination.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-pagination
A paginator allows users to navigate between pages of related content.
Slot Name | Description |
---|---|
|
An ordered list of links |
go-to-page |
"Go to page" text, defaults to "Page" |
out-of |
"of" text |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
overflow |
overflow |
Override |
|
|
label |
label |
Accessible label for the 'nav' element |
|
|
label-first |
labelFirst |
Accessible label for the 'first page' button |
|
|
label-previous |
labelPrevious |
Accessible label for the 'previous page' button |
|
|
label-next |
labelNext |
Accessible label for the 'next page' button |
|
|
label-last |
labelLast |
Accessible label for the 'last page' button |
|
|
size |
size |
Change pagination size to small |
|
|
variant |
variant |
"Open" variant |
|
|
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 |
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 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)
|
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
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.