<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
    <h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
    <ul class="pager__items js-pager__items d-flex list-inline justify-content-center align-items-stretch">
        <li class="pager__item list-inline-item pager__item--previous">
            <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
                <span class="visually-hidden">Previous page</span>
                <span aria-hidden="true">
                    <svg class="flipped">
                        <use xlink:href="#arrow"></use>
                    </svg>
                </span>
            </a>
        </li>
        <li class="pager__item list-inline-item pager__item--first">
            <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to first page" rel="first">
                <span class="visually-hidden">Page
                </span>1
            </a>
        </li>
        <li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
            <span aria-hidden="true">
                <svg>
                    <use xlink:href="#ellipsis"></use>
                </svg>
            </span>
        </li>
        <li class="pager__item list-inline-item">
            <a class="text-decoration-none d-flex p-2 justify-content-center align-items-center rounded-circle" href="#" title="Go to page 18">
                <span class="visually-hidden">
                    Page
                </span>18</a>
        </li>
        <li class="pager__item list-inline-item">
            <a class="text-decoration-none d-flex p-2 justify-content-center align-items-center rounded-circle" href="#" title="Go to page 19">
                <span class="visually-hidden">
                    Page
                </span>19</a>
        </li>
        <li class="pager__item list-inline-item is-active">
            <a class="text-decoration-none d-flex p-2 justify-content-center align-items-center bg-primary rounded-circle" href="#" title="Go to page 20">
                <span class="visually-hidden">
                    Page
                </span>20</a>
        </li>
    </ul>
</nav>
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
  <ul class="pager__items js-pager__items d-flex list-inline justify-content-center align-items-stretch">
    {% if min != 1 %}
    <li class="pager__item list-inline-item pager__item--previous">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to previous page" rel="prev">
        <span class="visually-hidden">Previous page</span>
        <span aria-hidden="true">
          <svg class="flipped">
            <use xlink:href="#arrow"></use>
          </svg>
        </span>
      </a>
    </li>
    <li class="pager__item list-inline-item pager__item--first">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to first page" rel="first">
        <span class="visually-hidden">Page
        </span>1
      </a>
    </li>
    <li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
      <span aria-hidden="true">
        <svg>
          <use xlink:href="#ellipsis"></use>
        </svg>
      </span>
    </li>
    {% endif %}
    {% for index in range(min, max) %}
    <li class="pager__item list-inline-item{{ (current == index) ? " is-active" : "" }}">
      <a class="text-decoration-none d-flex p-2 justify-content-center align-items-center{{ (current == index) ? " bg-primary" : "" }} rounded-circle" href="#" title="Go to page {{ index }}">
        <span class="visually-hidden">
          Page
        </span>{{ index }}</a>
    </li>
    {% endfor %}
    {% if max != current %}
    <li class="pager__item list-inline-item pager__item--ellipsis px-1" role="presentation">
      <span aria-hidden="true">
        <svg>
          <use xlink:href="#ellipsis"></use>
        </svg>
      </span>
    </li>
    <li class="pager__item list-inline-item pager__item--last">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to last page" rel="last">
        <span class="visually-hidden">Page
        </span>{{ last }}
      </a>
    </li>
    <li class="pager__item list-inline-item pager__item--next">
      <a class="text-decoration-none d-flex px-1 justify-content-center align-items-center rounded-circle" href="#" title="Go to next page" rel="next">
        <span class="visually-hidden">Next page</span>
        <span aria-hidden="true">
          <svg>
            <use xlink:href="#arrow"></use>
          </svg>
        </span>
      </a>
    </li>
    {% endif %}
  </ul>
</nav>
{
  "min": 18,
  "max": 20,
  "current": 20,
  "last": 20
}
  • Content:
    .pager__item {
      &--ellipsis,
      a {
        width: 2rem;
        height: 2rem;
      }
    
      a {
        &:hover {
          background-color: $gray-200;
        }
      }
    
      svg {
        width: 100%;
        height: 100%;
    
        &.flipped {
          transform: rotate(180deg);
        }
      }
    }
  • URL: /components/raw/pager/pager.scss
  • Filesystem Path: src/components/02-structures/pager/pager.scss
  • Size: 246 Bytes

No notes defined.