1 Page
2 Pages
3 Pages
4 Pages
5 Pages
7 Pages
Logic if more than 7 pages
The Pagination listing component includes seven equal-sized, equally spaced slots arranged in a single horizontal line. Each slot can accept a navigation item (typically a link to a specific page) or an overflow indicator (we use an ellipsis …) to indicate that there are pages we're not showing.
Logic of displaying HSE pagination-listing component:
- The component features a maximum of seven slots inside pagination listing.
- Remove extra slots if there are fewer than 7 pages.
- Previous and Next links always displayed.
- When first page is selected "Previous" displayed as a disabled link and has focus state, the same for the last page but for "Next" text.
- Each slot can contain a navigation item or an overflow indicator (ellipsis …
…tag). - The component should always show the first page, current page and last page.
- Show an overflow indicator when there are pages missing.
- Always show both the previous page and the next page adjacent to the current page.
- First 5 pages in results and last 5 pages are shown, when current page is in range from 1 to 4 from the first or from the last page of results.