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)
(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:
In the examples below, change the elements marked in bold to match your own content.
<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