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
accessibleDescribedBy accessible-described-by Described By id string undefined
accessibleDescription accessible-description Aria description the button string undefined
accessibleDetails accessible-details Details of the component string undefined
accessibleLabelledBy accessible-labelled-by String of id's that indicate alternative labels elements string undefined
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", pagination_label: "Pagination, choose a number to jump to a page", select_label: "Total pages {0}, 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", pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle", select_label: "Sivuja yhteensä {0}, 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", pagination_label: "Paginering, välj en siffra för att hoppa till en sida", select_label: "Totalt antal sidor {0}, 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 ""
compactBreakpoint compact-breakpoint Breakpoint at which the pagination should be rendered as compact with a select element "large" | "medium" | "none" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "xxx-small" "x-small"
current current The current page number 1
disabled disabled Makes the controls of pagination component disabled. boolean false
pageLinks page-links Array of urls that are used to create page links string | string[] undefined
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" this part enables style overrides for the navigation-arrow
"navigation-jump" this part enables style overrides for the navigation-jump
"navigation-overlay" this part enables style overrides for the navigation-overlay
"navigation-section" this part enables style overrides for the 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.

Integration guidelines


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


Troubleshooting

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