TTS. DocsPanel Design System
1.4.0
Components

Pagination

Contents

The Pagination component is a user interface element used for navigating through a list of content spread across multiple pages. It allows users to easily move between pages and access specific content without overwhelming them with all the data at once.

If you are using it with vue, you should import vuejs-paginate-next by npm install vuejs-paginate-next --save

Introduction

The Pagination component helps users navigate through large datasets by breaking them into smaller, manageable sections. This improves usability by allowing users to access relevant content without excessive scrolling. It typically includes numbered pages, navigation arrows, and sometimes “previous” and “next” options.

Default

The following element is a visual representation of the pagination component.

View Mode 
                          
 HTML
                            
                          
<ul class="pagination">
    <li class="pagination__item pagination__item--disabled pagination__item--prev">
        <a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a>
    </li>
    <li class="pagination__item pagination__item--active">
        <a class="pagination__item-link" href="#!">1</a>
    </li>
    <li class="pagination__item">
        <a class="pagination__item-link" href="#!">2</a>
    </li>
    <li class="pagination__item">
        <a class="pagination__item-link" href="#!">3</a>
    </li>
    <li class="pagination__item">
        <span class="pagination__item-dots">...</span>
    </li>
    <li class="pagination__item">
        <a class="pagination__item-link" href="#!">12</a>
    </li>
    <li class="pagination__item pagination__item--next">
        <a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-left"></span></a>
    </li>
</ul>
<paginate
  :prev-text="'‹'"
  :next-text="'›'"
  :page-count="20"
  :click-handler="functionName"
  :container-class="'pagination'"
  :page-class="'pagination__item'"
  :page-link-class="'pagination__item-link'"
  :prev-class="'pagination__item pagination__item--prev'"
  :prev-link-class="'pagination__item-link'"
  :next-class="'pagination__item pagination__item--next'"
  :next-link-class="'pagination__item-link'"
  :active-class="'pagination__item--active'"
  :disabled-class="'pagination__item--disabled'"
  :break-view-class="'pagination__item'"
  :break-view-link-class="'pagination__item-dots'"
>
</paginate>
<script setup>
  import Paginate from 'vuejs-paginate-next'
</script>

Code structure

The .table-pagination class is placed on the wrapper element encompassing the pagination.

                    
 HTML
                      
                    
<ul class="pagination">
    <li class="pagination__item pagination__item--disabled pagination__item--prev">
        <a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-right"></span></a>
    </li>
    <li class="pagination__item pagination__item--active">
        <a class="pagination__item-link" href="#!">1</a>
    </li>
    <li class="pagination__item">
        <a class="pagination__item-link" href="#!">2</a>
    </li>
    <li class="pagination__item">
        <a class="pagination__item-link" href="#!">3</a>
    </li>
    <li class="pagination__item">
        <span class="pagination__item-dots">...</span>
    </li>
    <li class="pagination__item">
        <a class="pagination__item-link" href="#!">12</a>
    </li>
    <li class="pagination__item pagination__item--next">
        <a class="pagination__item-link" href="#!"><span class="pagination__item-icon tticon-chevron-left"></span></a>
    </li>
</ul>
Last updated 3 months ago