University of Leeds Design System v1.0.18.1

Pagination: Page 2 Of 4

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-1" 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-1" data-number="1">
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>1
                </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-2" data-number="2" aria-current=page>
                <span class="uol-icon__label">
                    <span class="hide-accessible">Page </span>2
                </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-3" data-number="3">
                <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-3" 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 2 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": 2,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  }
}