Blaze UI Pagination Attributes

Last Updated : 05 May, 2022

Blaze UI is a user interface toolkit that helps developers to build maintainable websites by using its components. All of its components are mobile-first and scale accordingly based on screen size.

In this article, we will be seeing Blaze UI Pagination Attributes. Pagination is the technique of dividing content into separate pages when all the data cannot fit into a single page. To use the pagination, we can use the <blaze-pagination> element.

Blaze UI Pagination Attributes:

pages: This attribute is used to set the total number of pages in the pagination.
page: This attribute is used to set the current page in the pagination.

Syntax:

<blaze-pagination pages="TOTAL_PAGES" 
                  page="CURRENT_PAGE">
</blaze-pagination>

Example 1: The below example shows a pagination component with 8 total pages and the current page set to 2 initially.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0"> 
    <title> Pagination Attributes | Blaze UI </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <!-- We need to include the Blaze UI Javascript here -->
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
      
    <style> 
        html { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;">  
        GeeksforGeeks  
    </h2> 
    <h3>  
        Pagination Attributes - Blaze UI  
    </h3> 
      
    <div class="u-window-box-super"> 
        <blaze-pagination pages="8" page="2"> 
        </blaze-pagination> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Pagination Attributes

Example 2: The page attribute is optional. If it is not provided, the page will be set to 1. This example shows the same.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0"> 
    <title> Pagination Attributes | Blaze UI </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <!-- We need to include the Blaze UI Javascript here -->
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
  
    <style> 
        html { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;">  
        GeeksforGeeks 
    </h2> 
    <h3> 
        Pagination Attributes - Blaze UI 
    </h3> 
      
    <div class="u-window-box-super"> 
        <blaze-pagination pages="5"> 
        </blaze-pagination> 
    </div> 
</body> 
  
</html>