Open In App

Blaze UI Pagination

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has excellent different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI provides a pagination feature, pagination is helpful when the website contains lots of content on a single page, and a single page will not look good with all those topics together.

  • Blaze UI Pagination Attributes: There are two attributes that are acceptable by Blaze UI Pagination one is Page and another is Pages.
  • Blaze UI Pagination Events: There is only one event, this event is triggered when the page changes and returns to the current page.
  • Blaze UI Pagination Methods: There is only one method which is currentPage().
  • Blaze UI Pagination CSS: This is used to create pagination layouts, control, and different pages.

We can add a pagination feature using the blaze-pagination tag provided by Blaze UI without defining any class. For this follow the following given syntax.

Syntax:

<blaze-pagination pages="..." page="..."></blaze-pagination>

We can add a pagination feature using the classes provided by Blaze UI.

Syntax:

<nav class="c-pagination">
   <button class="c-pagination__control"> ... </button>
   <div class="c-pagination__pages">
     <button class="c-pagination__control" aria-current="page"> ... </button>
     ...
   </div>
   <button class="c-pagination__control"> ... </button>
</nav>

Example 1: The following code demonstrates the Blaze UI pagination feature using the Blaze UI pagination tag.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="module"
            src=
    </script>
    <script nomodule=""
            src=
    </script>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>Blaze UI Pagination</h3>
     
    <blaze-pagination pages="6"
                      page="2">
    </blaze-pagination>
</body>
 
</html>


Output: 

 

Example 2: The following code demonstrates the Blaze UI pagination using the Blaze UI CSS Classes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="module"
            src=
    </script>
    <script nomodule=""
            src=
    </script>
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Blaze UI Pagination
    </h3>
 
    <nav class="c-pagination">
        <button class="c-pagination__control">
            previous
        </button>
         
        <div class="c-pagination__pages">
            <button class="c-pagination__control">
              1
            </button>
            <button class="c-pagination__control">
              2
            </button>
            <button class="c-pagination__control"
                    aria-current="page">
              3
            </button>
        </div>
         
        <button class="c-pagination__control">
          next
        </button>
    </nav>
</body>
 
</html>


Output:

 

Note: Using classes to add pagination will provide the body for the pagination, we have to add some JavaScript to make it work.

Example 3: The following code demonstrates the Blaze UI pagination method.

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">
    <link rel="stylesheet"
          href=
    <script type="module"
            src=
    </script>
 
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
     
    <h3>Pagination Methods - Blaze UI</h3>
 
    <div class="u-window-box-super">
        <blaze-pagination id="page"
                          pages="6"
                          page="2">
        </blaze-pagination>
        <div class="u-window-box-large">
            <button class="c-button"
                    onclick="func()">
                Page Number
            </button>
        </div>
        <div id="demo"></div>
    </div>
 
    <script>
        async function func() {
            var a = await this.document
                .querySelector("#page").currentPage();
 
            document.getElementById("demo").innerHTML = a;
        }
    </script>
</body>
 
</html>


Output:

 

Reference: https://www.blazeui.com/components/pagination/



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads