Skip to content
Related Articles

Related Articles

Blaze UI Tabs Methods

Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
Improve Article
Save Article

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI Tabs Methods. There are two methods for the Tab component which are discussed below.

Blaze UI Tabs Methods:

  • Blaze UI Tabs currentTab() Method: This method is used to get the index of the currently opened tab of the Tab component.

Syntax:

document.querySelector(".selector").currentTab();
  • Blaze UI Tabs openTab(tabIndex: number) Method: The openTab method is used to open a tab programmatically. This method takes an argument of type number, which is the index of the tab to be opened.

Syntax:

document.querySelector(".selector").openTab(tabIndex);

Example 1: This example shows the use of the current tab method to get the index of the currently opened tab.

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>
    <script nomodule=""
            src=
    </script>
 
    <style>
        body {
            font-family: sans-serif;
        }
    </style>
</head>
 
<body>
    <div class="u-centered">
        <h2 style="color:green;">
            GeeksforGeeks
        </h2>
         
        <h3>Tabs Methods - Blaze UI</h3>
    </div>
 
    <div class="u-window-box-super">
        <blaze-tabs id="tabgroup1">
            <blaze-tab header="Tab 1">
                This is Tab 1
            </blaze-tab>
            <blaze-tab header="Tab 2" open>
                This is Tab 2
            </blaze-tab>
            <blaze-tab header="Tab 3">
                This is Tab 3
            </blaze-tab>
            <blaze-tab header="Tab 4">
                This is Tab 4
            </blaze-tab>
        </blaze-tabs>
 
        <div class="u-centered">
            <button class="c-button"
                onclick="getCurrentTab();">
                Check current tab
            </button>
             
<p>
                The index of current tab is:
                <b><span id="result"></span></b>
            </p>
 
        </div>
    </div>
 
    <script>
        function getCurrentTab() {
            document.querySelector("#tabgroup1")
            .currentTab().then(function (result) {
                document.querySelector("#result")
                    .innerText = result;
            });
        }
    </script>
</body>
 
</html>


Output:

 

Example 2: This example shows the use of the openTab method to programmatically open a tab.

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>
    <script nomodule=""
            src=
    </script>
 
    <style>
        body {
            font-family: sans-serif;
        }
    </style>
</head>
 
<body>
    <div class="u-centered">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
         
        <h3>Tabs Methods - Blaze UI</h3>
    </div>
 
    <div class="u-window-box-super">
        <blaze-tabs id="tabgroup1">
            <blaze-tab header="Tab 1">
                This is Tab 1
            </blaze-tab>
            <blaze-tab header="Tab 2" open>
                This is Tab 2
            </blaze-tab>
            <blaze-tab header="Tab 3">
                This is Tab 3
            </blaze-tab>
            <blaze-tab header="Tab 4">
                This is Tab 4
            </blaze-tab>
        </blaze-tabs>
 
        <div class="u-centered">
            <button class="c-button" onclick="openTab1()">
                Open Tab 1
            </button>
            <button class="c-button" onclick="openTab2()">
                Open Tab 2
            </button>
            <button class="c-button" onclick="openTab3()">
                Open Tab 3
            </button>
            <button class="c-button" onclick="openTab4()">
                Open Tab 4
            </button>
        </div>
    </div>
 
    <script>
        function openTab1() {
            document.querySelector("#tabgroup1").openTab(0);
        }
        function openTab2() {
            document.querySelector("#tabgroup1").openTab(1);
        }
        function openTab3() {
            document.querySelector("#tabgroup1").openTab(2);
        }
        function openTab4() {
            document.querySelector("#tabgroup1").openTab(3);
        }
    </script>
</body>
 
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!