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/ec-base/ec-base'; @import '@ecl/generic-component-pager/generic-component-pager'; // Use generic mixin @include exports('ec-component-pager') { @include ecl-pager(); }
- URL: /components/raw/ec-component-pager/ec-component-pager.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-pager/ec-component-pager.scss
- Size: 251 Bytes
- Handle: @ecl/ec-component-pager
- Tags: molecule
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-pager/ec-component-pager.twig