Skip to main content

Pagination
Ready

The pagination component makes it easy to display a list of page numbers for your users, so that they may navigate large datasets

The pagination component can be configured for most purposes and features a range og acessibility features for sighted and non-sighted users

Examples

Open in new window
<duet-layout center>
<div slot="main">
<duet-card heading="Default pagination">
<duet-pagination></duet-pagination>

</duet-card>
</div>
</duet-layout>
<script>
const paginator = document.querySelector('duet-pagination');


paginator.addEventListener('duetPageChange', (e) => {
console.log(e.detail);
});


</script>
Open in new window
<duet-layout center>
<div slot="main">
<duet-card heading="large pagination list">
<duet-pagination total="10000" take="5" visible-items="70"></duet-pagination>

</duet-card>
</div>
</duet-layout>
<script>
const paginator = document.querySelector('duet-pagination');


paginator.addEventListener('duetPageChange', (e) => {
console.log(e.detail);
});


</script>
Open in new window
<duet-layout center>
<div slot="main">
<duet-card heading="Setting current pagination">
<duet-pagination current="23"></duet-pagination>

</duet-card>
</div>
</duet-layout>
<script>
const paginator = document.querySelector('duet-pagination');


paginator.addEventListener('duetPageChange', (e) => {
console.log(e.detail);
});


</script>

Properties #

Property Attribute Description Type Default
accessibleLabels -- Default pagination labels { [x: string]: string; } getLocaleString( this.accessibleLabelsDefaults )
accessibleLabelsDefaults -- Default pagination labels DuetLangObject { en: { next_page: "Next page", previous_page: "Previous page", first_page: "First page", last_page: "Last page", jump_to: "Jump to page", go_to: "Go to page", description: "You may use arrow keys to select page number, or enter a page number when this element is in focus to jump to a page", pagination_label: "Pagination, choose a number to jump to a page", prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate", next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate", }, fi: { next_page: "Seuraava sivu", previous_page: "Edellinen sivu", first_page: "Ensimmäinen sivu", last_page: "Viimeinen sivu", jump_to: "Siirry sivulle", go_to: "Siirry sivulle", description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen, tai kirjoittaa sivunumeron, jos tämä elementti on aktiivinen, siirtymään sivulle", pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle", prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi", next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi", }, sv: { next_page: "Nästa sida", previous_page: "Föregående sida", first_page: "Första sidan", last_page: "Sista sidan", jump_to: "Hoppa till sida", go_to: "Hoppa till sida", description: "Du kan använda piltangenterna för att välja sida, eller skriva in sida när elementet är i fokus för att hoppa till en sida", pagination_label: "Sidutning, välj en siffra för att hoppa till en sida", prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera", next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera", }, }
ariaControls accessible-controls Used to indicate which dom element with ID this element controls string ""
current current The current page number 1
jumpString jump-string Characters to use for the jump buttons. string "..."
take take The size of the take, when paginating. number 5
theme theme Theme of the pagination. "" | "default" | "turva" ""
total total The total size of the paginating data number 1000
variation variation Variation of the paginator (compact and default supported) "compact" | "default" "default"
visibleItems visible-items Amount of visible page numbers to show number 5

Events #

Event Description Type
duetPageChange Emitted a page selection has been made CustomEvent<{ originalEvent?: Event; component: "duet-pagination"; current: number; take: number; from: number; to: number; type: "page" | "jump"; }>

Shadow Parts #

Part Description
"navigation-arrow"
"navigation-jump"
"navigation-overlay"
"navigation-section"

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • To let user specify a numeric value using plus and minus buttons which must be no less than a given value, and no more than another given value.

When not to use #

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.


Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

Zeplin


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.