Pagination

Paging indicator component

Properties#

Name	Description
.pagination	The pagination component container
.pagination-item	The pagination controller component
.pagination-prev	The previous page controller
.pagination-next	The next page controller
.disabled [disabled]	The disabled style for pagination item/prev/next

Features#

default#

< Prev
1
...
20
21
22
...
30
Next >

<ul class="pagination">
  <li class="pagination-prev">
    <a href="#prev">&lt; Prev</a>
  </li>
  <li class="pagination-item">
    <a href="page/1">1</a>
  </li>
  <li class="pagination-item">
    ...
  </li>
  <li class="pagination-item">
    <a href="page/20">20</a>
  </li>
  <li class="pagination-item">
    <a href="page/21">21</a>
  </li>
  <li class="pagination-item">
    <a href="page/22">22</a>
  </li>
  <li class="pagination-item">
    ...
  </li>
  <li class="pagination-item">
    <a href="page/30">30</a>
  </li>
  <li class="pagination-next">
    <a href="#next">Next &gt;</a>
  </li>
</ul>

disabled#

<ul class="pagination">
  <li class="pagination-prev disabled">
    <a href="#">&lt; Prev</a>
  </li>
  <li class="pagination-item">
    <a href="#">1</a>
  </li>
  <li class="pagination-item">
    <a href="#">2</a>
  </li>
  <li class="pagination-item">
    <a href="#">3</a>
  </li>
  <li class="pagination-item">
    ...
  </li>
  <li class="pagination-item">
    <a href="#">30</a>
  </li>
  <li class="pagination-next">
    <a href="#">Next &gt;</a>
  </li>
</ul>

active page#

Active status for the pagination item

.pagination .pagination-item.active a {
  @apply border-2 border-solid border-indigo-500;
  @apply rounded;
}

<ul class="pagination">
  <li class="pagination-prev">
    <a href="#">&lt; Prev</a>
  </li>
  <li class="pagination-item">
    <a href="#">1</a>
  </li>
  <li class="pagination-item active">
    <a href="#">2</a>
  </li>
  <li class="pagination-item">
    <a href="#">3</a>
  </li>
  <li class="pagination-next disabled">
    <a href="#">Next &gt;</a>
  </li>
</ul>