@zplane-web/craft-licensing

Pagination: First Page 

<div id="pagination-63806-32448" class="pagination">
    <div class="pagination__inner">
        <div class="pagination__current">Page 1 of 110</div>

        <div class="pagination__buttons">

            <button class="button" type="button" title="Previous page" disabled>
                <span class="button__icon">
                    <svg class="icon icon--arrow-left" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-left"></use>
                    </svg> </span>
            </button>

            <a class="button" title="Next page" href="#">
                <span class="button__icon">
                    <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                    </svg> </span>
            </a>
        </div>
    </div>
</div>
 
{% set prevUrl = prevUrl ?? false %}
{% set nextUrl = nextUrl ?? false %}
{% set id = id ??? html_id('pagination') -%}

<div {{ html_attributes({
  id: id,
  class: 'pagination',
}, attrs ?? {}) }}>
  <div class="pagination__inner">
    <div class="pagination__current">
      {{- 'Page {current} of {total}' | t('site', { current: current, total: total }) -}}
    </div>

    <div class="pagination__buttons">
      {% include '@button' with {
        title: 'Previous page' | t('site'),
        icon: 'arrow-left',
        link: prevUrl,
        disabled: not prevUrl,
        style: not prevUrl ? 'outline',
      } only %}

      {% include '@button' with {
        title: 'Next page' | t('site'),
        icon: 'arrow-right',
        link: nextUrl,
        disabled: not nextUrl,
        style: not nextUrl ? 'outline',
      } only %}
    </div>
  </div>
</div>
 
{
  "total": 110,
  "current": 1,
  "nextUrl": "#",
  "prevUrl": null,
  "jump": {
    "name": "p"
  }
}
  • Content: 
    .pagination {
  container-name: pagination;
  container-type: inline-size;
  font-size: var(--pagination-font-size, var(--font-size-small));
  text-align: center;
}

.pagination__inner {
  align-items: center;
  column-gap: 1.6rem;
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;

  @container pagination (inline-size >= 50rem) {
    flex-direction: row;
  }
}

.pagination__buttons {
  column-gap: 0.8rem;
  display: flex;

  @container pagination (inline-size >= 50rem) {
    order: 3;
  }
}

.pagination__current {
  @container pagination (inline-size >= 50rem) {
    margin-inline-start: auto;
    order: 2;
  }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/components/3-molecules/pagination/pagination.scss
  • Size: 632 Bytes

No notes defined.