Blaze UI Basic Tabs

Last Updated : 05 May, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

Tabs are used to switch between the content without leaving the current page. Blaze UI Basic Tabs is used to create the basic Tab using the tab attributes. In this article, we will discuss Blaze UI Basic Tabs.

Blaze UI Basic Tabs Attributes:

blaze-tabs: This attribute is used to create the tabs.
blaze-tab: This attribute is used to create a single tab.

Syntax:

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

Example 1: The following example demonstrates the Blaze UI Basic Tabs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Basic Tabs </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> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Basic Tabs </h3>  
  
        <blaze-tabs> 
            <blaze-tab header="Tab 1" open> 
                A Computer Science portal for geeks.  
            </blaze-tab> 
  
            <blaze-tab header="Tab 2"> 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles. 
            </blaze-tab> 
  
            <blaze-tab header="Tab 3"> 
                GeeksforGeeks 
            </blaze-tab> 
        </blaze-tabs> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Basic Tabs

Example 2: The following example demonstrates the Blaze UI Basic Tabs with a disabled tab.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Basic Tabs </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> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Basic Tabs </h3>  
  
        <blaze-tabs> 
            <blaze-tab type="error" header="Tab 1" open> 
                A Computer Science portal for geeks.  
            </blaze-tab> 
  
            <blaze-tab disabled header="Tab 2"> 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles. 
            </blaze-tab> 
  
            <blaze-tab type="info" header="Tab 3"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > 
            </blaze-tab> 
  
            <blaze-tab header="Tab 4" open> 
                GeeksforGeeks 
            </blaze-tab> 
        </blaze-tabs> 
    </div> 
</body> 
  
</html>