Europa Component Library

Pager

Documentation • Demo

Pager

Replace traditional pagination

{#
  Accepts:
    - href (string): link of the next page (default: '')
    - label (string): label of the pager
    - extra_classes (string): additional classes to add to the component
    - extra_attributes (array of { name: '', value: '' })
#}

{# Internal properties #}
{% set _css_class = 'ema-pager' %}
{% set _extra_attributes = '' %}
{% set _title = title|default('') %}

{% if extra_classes is defined and extra_classes is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined and extra_attributes is not empty %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}
<a href="{{href}}" class="{{ _css_class }}"{{ _extra_attributes }}>
{{label}}
</a>
 
{
  "href": "#",
  "label": "Load more"
}
 
<a href="#" class="ema-pager">
Load more
</a>
  • Content: 
    /**
* EMA Separator component
*/

.ema-pager {
  color: map-get($ema-colors, 'grey-3');
  display: block;
  font-size: map-get($ecl-font-size, 'l');
  line-height: 3;
  padding: map-get($ecl-spacing, 's');
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ema-pager:hover,
.ema-pager:focus {
  background-color: map-get($ema-colors, 'light-grey-2');
  color: map-get($ema-colors, 'grey-2');
  text-decoration: underline;
}
  • URL: /components/raw/ema-pager/ema-pager.scss
  • Filesystem Path: framework/components/ema-pager/ema-pager.scss
  • Size: 453 Bytes