No notes defined.

{% if pagination.pages.length > 1 %}
  <nav class="uol-pagination" aria-label="pagination">
    <ol class="uol-pagination__list">
      <li class="uol-pagination__item">
        {% if pagination.current === 1 %}
          <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst" type="button" disabled>First page</button>
        {% else %}
          <a href="{{ pagination.pages[0].url}}" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst">First page</a>
        {% endif %}
      </li>
      <li class="uol-pagination__item">
        {% if pagination.current === 1 %}
          <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft" type="button" disabled>Previous page</button>
        {% else %}
          <a href="{{ pagination.pages[pagination.current - 2].url}}" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft">Previous page</a>
        {% endif %}
      </li>
      {% for page in pagination.pages %}
        {% if pagination.current - 2 < page.number and pagination.current + 3 > page.number %}
          <li class="uol-pagination__item uol-pagination__item--numeric {{ 'uol-pagination__item--current' if page.number === pagination.current }}">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="{{ page.url }}" data-number="{{ page.number }}" {{ 'aria-current=page' if page.number === pagination.current }}>
              <span class="uol-icon__label">
                <span class="hide-accessible">Page </span>{{ page.number }}
              </span>
            </a>
          </li>
        {% endif %}
      {% endfor %}
      <li class="uol-pagination__item">
        {% if pagination.current === pagination.pages.length %}
          <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight" type="button" disabled>Next page</button>
        {% else %}
          <a href="{{ pagination.pages[pagination.current].url }}" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight">Next page</a>
        {% endif %}
      </li>
      <li class="uol-pagination__item">
        {% if pagination.current === pagination.pages.length %}
          <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast" type="button" disabled>Last page</button>
        {% else %}
          <a href="{{ pagination.pages[pagination.pages.length - 1].url}}" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast">Last page</a>
        {% endif %}
      </li>
    </ol>

    <span class="uol-pagination__status">
      Page {{ pagination.current }} of {{ pagination.pages.length }}
    </span>
  </nav>
{% endif %}
<nav class="uol-pagination" aria-label="pagination">
    <ol class="uol-pagination__list">
        <li class="uol-pagination__item">

            <a href="/page-1" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst">First page</a>

        </li>
        <li class="uol-pagination__item">

            <a href="/page-2" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft">Previous page</a>

        </li>

        <li class="uol-pagination__item uol-pagination__item--numeric ">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-2" data-number="2">
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>2
                </span>
            </a>
        </li>

        <li class="uol-pagination__item uol-pagination__item--numeric uol-pagination__item--current">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-3" data-number="3" aria-current=page>
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>3
                </span>
            </a>
        </li>

        <li class="uol-pagination__item uol-pagination__item--numeric ">
            <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-4" data-number="4">
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>4
                </span>
            </a>
        </li>

        <li class="uol-pagination__item">

            <a href="/page-4" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight">Next page</a>

        </li>
        <li class="uol-pagination__item">

            <a href="/page-4" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast">Last page</a>

        </li>
    </ol>

    <span class="uol-pagination__status">
        Page 3 of 4
    </span>
</nav>
  • Content:
    .uol-pagination {
      text-align: center;
      font-variant-numeric: lining-nums;
      padding-bottom: $spacing-4;;
      border-bottom: 1px solid $color-border--light;
    }
    
      .uol-pagination__list {
        margin: $spacing-4 0 $spacing-3;
        padding: 0;
        list-style: none;
      }
    
      .uol-pagination__item {
        display: inline-block;
        margin: 0 ($spacing-1 / 2);
    
        &.uol-pagination__item--numeric {
    
          @include media("<uol-media-s") {
            display: none;
          }
    
          .uol-button {
    
            &:focus {
              box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px $color-focus-accent;
              outline: 3px dotted transparent;
            }
    
            &:focus:not(:focus-visible) {
              box-shadow: none;
            }
    
            &:focus-visible {
              box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px $color-focus-accent;
            }
          }
    
          &.uol-pagination__item--current {
            display: inline-block;
          }
        }
    
        .uol-button--primary {
          @include button_focus(-7px);
        }
    
        @include media(">=uol-media-xs") {
          margin: 0 $spacing-1;
        }
      }
    
      .uol-pagination__link {
        .js & {
          @include media("<uol-media-s") {
            display: none;
          }
    
          &[aria-current] {
            display: inline-flex;
            background: transparent;
            color: $color-font;
            border-color: transparent;
    
            &:hover,
            &:focus {
              box-shadow: none;
            }
    
            &:focus {
              box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px $color-focus-accent;
              outline: 3px dotted transparent;
            }
    
            &:focus:not(:focus-visible) {
              box-shadow: none;
            }
    
            &:focus-visible {
              box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px $color-focus-accent;
            }
    
            @media (forced-colors: active) {
              border-color: Canvas;
              color: ButtonText;
            }
    
            @media (-ms-high-contrast: active) {
              border-color: Window;
            }
          }
    
          &::after {
            content: attr(data-number);
            display: block;
            width: 100%;
            height: 1em;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          }
        }
      }
    
      .uol-pagination__status {
        @extend %text-size-caption;
      }
    
  • URL: /components/raw/uol-pagination/_pagination.scss
  • Filesystem Path: src/library/02-components/pagination/_pagination.scss
  • Size: 2.3 KB
{
  "pagination": {
    "current": 3,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  }
}