EU System

Pagers

Documentation • Demo

Pager

Why and how to use this component

A pager enables a user to navigate in a list divided into different pages in order to see additional results in that list.

When to use this component

  • to be used when the filter component is used and there are more than 20 results (i.e. ‘Announcements’)

Do not use this component

  • when it’s useful to see all results (i.e. ‘Departments’, ‘Policies’) - in this case, show all results
{#
  Parameters:
    - "aria_label" (string) (default: 'Pagination navigation')
    - "current_page" (integer)  (default: 1): page currently displayed
    - "max_page" (integer) (default: 0): total number of pages
    - "fragment_url" (string) (default: '/page'): url parameter to identify current page
    - "title_previous" (string) (default: 'Go to previous page'): helper when hovering previous page button
    - "title_page" (string) (default: 'Go to page'): helper when hovering a page button
    - "title_next" (string) (default: 'Go to next page'): helper when hovering next page button
    - "label_previous" (string) (default: '‹ Previous')
    - "label_page" (string) (default: 'Page'): page label displayed on small screens
    - "label_next" (string)  (default: 'Next ›')
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-pager' with {
  'aria_label': aria_label|default('Pagination navigation'),
  'current_page': current_page|default(1),
  'max_page': max_page|default(0),
  'fragment_url': fragment_url|default('/page'),
  'title_previous': title_previous|default('Go to previous page'),
  'title_page': title_page|default('Go to page'),
  'title_next': title_next|default('Go to next page'),
  'label_previous': label_previous|default('‹ Previous'),
  'label_page': label_page|default('Page'),
  'label_next': label_next|default('Next ›'),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([])
} only %}
 
{
  "current_page": 7,
  "max_page": 20
}
 
<nav class="ecl-pager" aria-label="Pagination navigation">
  <ul class="ecl-pager__list">
    <li class="ecl-pager__item ecl-pager__item--previous">
      <a class="ecl-pager__link" title="Go to previous page" href="/page=6">‹ Previous</a>
    </li>
    <li class="ecl-pager__item ecl-pager__item--first">
      <a class="ecl-pager__link" title="Go to page 1" href="/page=1">
        <span class="ecl-u-sr-only">Page </span>1
      </a>
    </li>
    <li class="ecl-pager__item ecl-pager__item--ellipsis">…</li>
    <li class="ecl-pager__item">
      <a class="ecl-pager__link" title="Go to page 5" href="/page=5">
        <span class="ecl-u-sr-only">Page </span>5
      </a>
    </li>
    <li class="ecl-pager__item">
      <a class="ecl-pager__link" title="Go to page 6" href="/page=6">
        <span class="ecl-u-sr-only">Page </span>6
      </a>
    </li>
    <li class="ecl-pager__item ecl-pager__item--current" aria-current="true">
      <span class="ecl-pager__item-text">Page</span> 7
    </li>
    <li class="ecl-pager__item">
      <a class="ecl-pager__link" title="Go to page 8" href="/page=8">
        <span class="ecl-u-sr-only">Page </span>8
      </a>
    </li>
    <li class="ecl-pager__item">
      <a class="ecl-pager__link" title="Go to page 9" href="/page=9">
        <span class="ecl-u-sr-only">Page </span>9
      </a>
    </li>
    <li class="ecl-pager__item ecl-pager__item--ellipsis">…</li>
    <li class="ecl-pager__item ecl-pager__item--last">
      <a class="ecl-pager__link" title="Go to page 20" href="/page=20">
        <span class="ecl-u-sr-only">Page </span>20
      </a>
    </li>
    <li class="ecl-pager__item ecl-pager__item--next">
      <a class="ecl-pager__link" title="Go to next page" href="/page=8">Next ›</a>
    </li>
  </ul>
</nav>
  • Content: 
    /**
 * ECL Pager
 * @define pager
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-pager/generic-component-pager';

// Use generic mixin
@include exports('eu-component-pager') {
  @include ecl-pager();
}
  • URL: /components/raw/eu-component-pager/eu-component-pager.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-pager/eu-component-pager.scss
  • Size: 251 Bytes
  • Handle: @ecl/eu-component-pager
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-pager/eu-component-pager.twig