<div class="c-pagination c-pagination--sm">
<button class="o-button o-button--icon c-pagination__button c-pagination__button--prev" disabled aria-label="Previous">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L11.4142 12L14.7071 15.2929C15.0976 15.6834 15.0976 16.3166 14.7071 16.7071C14.3166 17.0976 13.6834 17.0976 13.2929 16.7071L9.29289 12.7071C8.90237 12.3166 8.90237 11.6834 9.29289 11.2929L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289Z" />
</svg>
</span>
</button>
<div class="c-pagination__counter">
<span class="c-pagination__counter c-pagination__counter--active">1</span>
<span class="c-pagination__counter c-pagination__counter--divider">/</span>
<span class="c-pagination__counter c-pagination__counter--total">4</span>
</div>
<button class="o-button o-button--icon c-pagination__button c-pagination__button--next" aria-label="Next">
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</button>
</div>
{% set base_class = pagination.base_class|default('c-pagination') %}
{% if pagination.items %}
{% set pagination_active = "" %}
{% for item in pagination.items %}
{% if item.active %}
{% set pagination_active = loop.index %}
{% endif %}
{% endfor %}
<div class="{{ bem(base_class, pagination.element, pagination.modifiers, pagination.extra) }}">
{% include "@button" with {
"button": {
"icon": {
"name": pagination.modifiers == "sm" ? "chevron-left" : "arrow-left",
"modifiers": "md"
},
"attributes": {
"aria-label": "Previous"
},
"disabled": pagination_active == 1 ? true : false,
"modifiers": "icon",
"extra": bem(base_class, 'button', 'prev')
}
} %}
{% if pagination.modifiers == "sm" %}
<div class="{{ bem(base_class, 'counter') }}">
<span class="{{ bem(base_class, 'counter', 'active') }}">{{ pagination_active }}</span>
<span class="{{ bem(base_class, 'counter', 'divider') }}">/</span>
<span class="{{ bem(base_class, 'counter', 'total') }}">{{ pagination.items|length }}</span>
</div>
{% else %}
<div class="{{ bem(base_class, 'items') }}">
{% for item in pagination.items %}
{% include "@button" with {
"button": {
"url": item.url,
"text": loop.index,
"modifiers": item.active ? "secondary" : "icon",
"extra": [bem(base_class, 'button', 'item'), ]
}
} %}
{% endfor %}
</div>
{% endif %}
{% include "@button" with {
"button": {
"icon": {
"name": pagination.modifiers == "sm" ? "chevron-right" : "arrow-right",
"modifiers": "md"
},
"attributes": {
"aria-label": "Next"
},
"disabled": pagination_active == pagination.items|length ? true : false,
"modifiers": "icon",
"extra": bem(base_class, 'button', 'next')
}
} %}
</div>
{% endif%}
{
"pagination": {
"items": [
{
"url": "/page/1",
"text": "1",
"active": true
},
{
"url": "/page/2",
"text": "2"
},
{
"url": "/page/3",
"text": "3"
},
{
"url": "/page/4",
"text": "4"
}
],
"modifiers": "sm"
}
}
/* ------------------------------------ *\
$PAGINATION
\* ------------------------------------ */
.c-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--dotd-space-xs);
&__counter {
display: flex;
align-items: center;
justify-content: center;
gap: var(--dotd-space-xs);
@include o-typography-body--xs('bold');
}
&__button {
padding: 0;
width: var(--dotd-icon-lg);
height: var(--dotd-icon-lg);
}
}
No notes defined.