Pagination

v0.0.0

The Pagination component show's a list of circular links. Use it for Pagination or Alphabet Filter.

Pagination #

Pagination divides content items into separate pages. The user can make an decision about where to stop or how many results to peruse.

This example shows a pagination, with a window of 3, first/last page and previous/next buttons.

Bootstrap utility classes .d-none and .d-md-block are used to hide elements on small screens.

<!-- Pagination  -->
<div class="vi-pagination">
  <ul class="vi-pagination__list">
    <li class="vi-pagination__item">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn__label">Previous</span></a>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item d-none d-md-block">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></a>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item d-none d-md-block">
      <!-- Button type: pagination  -->
      <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
    </li>
    <li class="vi-pagination__item">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">27</span></a>
    </li>
    <li class="vi-pagination__item">
      <!-- Button type: pagination  -->
      <span aria-current="page" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">28</span></span>
    </li>
    <li class="vi-pagination__item">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">29</span></a>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item d-none d-md-block">
      <!-- Button type: pagination  -->
      <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item d-none d-md-block">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">999</span></a>
    </li>
    <li class="vi-pagination__item">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn__label">Next</span></a>
    </li>
  </ul>
</div>

Small #

Use modifier --sm on .vi-pagination__item to have the smaller version of the items on larger screens.

<!-- Pagination  -->
<div class="vi-pagination">
  <ul class="vi-pagination__list">
    <li class="vi-pagination__item vi-pagination__item--sm">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn__label">Previous</span></a>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item vi-pagination__item--sm d-none d-md-block">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">1</span></a>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item vi-pagination__item--sm d-none d-md-block">
      <!-- Button type: pagination  -->
      <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
    </li>
    <li class="vi-pagination__item vi-pagination__item--sm">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">27</span></a>
    </li>
    <li class="vi-pagination__item vi-pagination__item--sm">
      <!-- Button type: pagination  -->
      <span aria-current="page" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">28</span></span>
    </li>
    <li class="vi-pagination__item vi-pagination__item--sm">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">29</span></a>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item vi-pagination__item--sm d-none d-md-block">
      <!-- Button type: pagination  -->
      <span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
    </li>
    <!-- .d-none and .d-md-block are Bootstrap Display classes -->
    <li class="vi-pagination__item vi-pagination__item--sm d-none d-md-block">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">999</span></a>
    </li>
    <li class="vi-pagination__item vi-pagination__item--sm">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn__label">Next</span></a>
    </li>
  </ul>
</div>

Alphabet Filter #

Use the Alphabet Filter on large data-sets where the user likely knows what letter the item begins with and where there is the liklihood that they may not know how to spell the entire word correctly.

Add modifier --alphabet to .vi-pagination__item for correct sizing.

<!-- Pagination  -->
<div class="vi-pagination">
  <ul class="vi-pagination__list">
    <li class="vi-pagination__item vi-pagination__item--alphabet">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">A</span></a>
    </li>
    <li class="vi-pagination__item vi-pagination__item--alphabet">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">B</span></a>
    </li>
    <li class="vi-pagination__item vi-pagination__item--alphabet">
      <!-- Button type: pagination  -->
      <a href="#" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">C</span></a>
    </li>
    <li class="vi-pagination__item vi-pagination__item--alphabet">
      <!-- Button type: pagination  -->
      <a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">D</span></a>
    </li>
    <!-- ...left out -->
  </ul>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Stylesheets #

The following stylesheets are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  CSS Optimized for print.
  Small spacing change.


Added

  25 Jan 2023 - Added modifier --sm to .vi-pagination__item for correct sizing of the Small Pagination
  Added modifier --alphabet to .vi-pagination__item for correct sizing of the Alphabet Filter Pagination
  Initial draft