Pagination

The Pagination component visually represents a series of pages or steps, highlighting the current active page. It is ideal for carousels, multi-step forms, or any scenario where users need to track their position within a sequence.

Description #

The Pagination component provides a simple and customizable way to show progress or navigation through multiple pages or steps. It supports two main display modes:

• Dot Mode: Displays empty circles (dots) for each page, with the active page highlighted. Best for minimal, icon-only indicators.

• Numbered Mode: Displays numbers inside each Pagination, with the active page highlighted. Useful for step-by-step processes or when page numbers are important.

Examples and Classes #

Dot Mode (20px)

            

                

                    

                    

                    

                    

                    

                
            
            

                
                
HTML
                
            
            <div class="pagination gap-1" data-pagination-size="20px">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page active"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

Numbered Mode (30px)

            

                

                    
1
                    
2
                    
3
                    
4
                    
5
                
            
            

                
                
HTML
                
            
            <div class="pagination gap-1" data-pagination-size="30px">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>

Numbered Mode (40px)

            

                

                    
1
                    
2
                    
3
                    
4
                    
5
                
            
            

                
                
HTML
                
            
            <div class="pagination gap-1" data-pagination-size="40px">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>

Dot Mode (50px)

            

                

                    

                    

                    

                    

                    

                
            
            

                
                
HTML
                
            
            <div class="pagination gap-1" data-pagination-size="50px">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page active"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

Available Classes

Class	Description
.pagination	Main wrapper for the Paginations. Controls the layout and spacing of the pages.
.page	Individual Pagination. Can be empty (dot mode) or contain a number (numbered mode).
.active	Applied to the currently active Pagination. Highlights the selected page.

Custom Properties

Property	Description
data-pagination-size	Sets the width and height of each Pagination (dot or number). A unit (such as px, rem, etc.) is required; percentage (%) values are not supported. For example, data-pagination-size="50px" makes each indicator 50px by 50px.

Layout Variations

The Pagination component supports different layout variations:

• Dot Mode: Minimal, empty circles for each page
• Numbered Mode: Numbered pages for step-by-step navigation
• Custom Size: Use the data-pagination-size CSS variable to adjust the indicator size
• Active State: Highlight the current page with the active class

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/pagination/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/pagination/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/pagination/script.js	JavaScript functionality

SCSS Variables #

            

                
                
SCSS
                
            
            $pagination-empty-custom-classes: ".bg-primary-color, .aspect-ratio-1x1, .radius-all-full";
$pagination-not-empty-custom-classes: ".bg-primary-color, .aspect-ratio-1x1, .radius-all-full, .bw-3, .border-style-solid, .border-primary-color, .on-primary-color, .bg-primary-color";
$pagination-active-empty-custom-classes: ".bg-secondary-color, .aspect-ratio-2x1";
$pagination-active-not-empty-custom-classes: ".bg-secondary-color";
$pagination-transition: .3s;
$pagination-pages-custom-classes: ".d-flex, .flex-row, .justify-content-center, .align-items-center";

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
indicators	Property	NodeList of all pagination elements
constructor(selector)	Method	Initializes the Pagination component and sets up event listeners
init()	Method	Sets up indicators and their pages
setupIndicator(indicator)	Method	Initializes each indicator and its pages
setupPageClick(page, allPages)	Method	Sets up click event for each page
activatePage(selectedPage, allPages)	Method	Activates the selected page and deactivates others

Implementation Example

            

                
                
JavaScript
                
            
            class PageIndicator {
    constructor(selector) {
        this.indicators = document.querySelectorAll(selector);
        this.init();
    }

    init() {
        this.indicators.forEach(indicator => {
            this.setupIndicator(indicator);
        });
    }

    setupIndicator(indicator) {
        const pages = indicator.querySelectorAll('.page');
        pages.forEach(page => {
            this.setupPageClick(page, pages);
        });
    }

    setupPageClick(page, allPages) {
        page.addEventListener('click', () => {
            this.activatePage(page, allPages);
        });
    }

    activatePage(selectedPage, allPages) {
        allPages.forEach(page => page.classList.remove('active'));
        selectedPage.classList.add('active');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new PageIndicator('.pagination');
});