Component

Pagination

Description

The Illinois theme component il-pagination provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last).

What it looks like

Example image (version 2.4, Dec. 8, 2021)

Try it out

• Component Builder (to see how it works with your own content and images)
• Dev Codepen (to experiment with all the code)

Sample patterns

(In the examples below, replace elements in bold with your own content.)

This tag should contain:

• An ID name
• Which page number you are currently on (in the example below, 3)
• How many pages in total are in this collection (in the example below, 5)

<il-pagination id=”example” page=”3” pages=”5“></il-pagination>

The URLs created by this pattern will resemble https://builder.toolkit.illinois.edu/prod/pagination/index.html?page=3.

Different URL structure with param

If you need to use a signifier other than “?page” in your pagination, you can control that with the param option.

In a scenario in which you were using this tool to count sections rather than pages, your tag might resemble:

<il-pagination id=”example” page=”3” pages=”5” param=”section“></il-pagination>

And the URL generated will resemble: 

https://builder.toolkit.illinois.edu/prod/pagination/index.html?section=3

Syntax guide

In the examples below, change the elements marked in bold to match your own content.

il-pagination 

Syntax:  

<il-pagination id="example" page="3" pages="5" param="anotherword"></il-pagination> 

• Required elements:
  • id=”list name”: The identifier of the pagination element itself
  • page=”#” : The numeric value of the currently selected page in the list
  • pages=”#”: The total number of pages that should be displayed in this list
• Optional elements:
  • param=”anotherword”: If the URL generated by your paginator uses something other than the word “page”,  indicate the alternate word using param. (See the different URL structure under Sample Patterns.)

About this component

• Type: CSS classes
• Introduced in: v2.3.0; 9/29/2021
• Deprecated?: No