Blaze UI Tabs Attributes

Last Updated : 06 May, 2022

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.

Blaze UI Tabs Attributes are used to create the tabs. We have four attributes to create the tab in Blaze UI. In this article, we will discuss the Tabs Attributes in Blaze UI.

Blaze UI Tabs Attributes:

type: This attribute is a string type that takes the color of the tab.
open: This attribute specifies the tab that should be selected when loaded.
disabled: This attribute is used to disable the tab.
header: This attribute is used to give the heading of the tab.

Syntax:

<blaze-tabs>
  <blaze-tab type="..." header="...">
      ...
  </blaze-tab>
  ...
</blaze-tabs>

Example 1: Below example demonstrates the Blaze UI Tabs Attributes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Tabs Attributes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
</head> 
  
<body class="u-window-box-large"> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Blaze UI Tabs Attributes  
        </h3> 
  
        <blaze-tabs> 
            <blaze-tab type="brand" 
                 header="Tab 1" open> 
                Welcome to GeeksforGeeks 
            </blaze-tab> 
  
            <blaze-tab type="info" 
                       header="Tab 2"> 
                A Computer Science portal for geeks. 
            </blaze-tab> 
  
            <blaze-tab header="Tab 3"> 
                GeeksforGeeks 
            </blaze-tab> 
        </blaze-tabs> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Tabs Attributes

Example 2: Below example demonstrates the Blaze UI Tabs Attributes with a disabled tab.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Tabs Attributes </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
  
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
</head> 
  
<body class="u-window-box-large"> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Blaze UI Tabs Attributes  
        </h3> 
  
        <blaze-tabs> 
            <blaze-tab type="brand" 
                 header="Tab 1" open> 
                Welcome to GeeksforGeeks 
            </blaze-tab> 
  
            <blaze-tab disabled  
                       header="Tab 2"> 
                A Computer Science portal for geeks. 
            </blaze-tab> 
  
            <blaze-tab header="Tab 3"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
            </blaze-tab> 
        </blaze-tabs> 
    </div> 
</body> 
  
</html>