Skip to content
Related Articles

Related Articles

Blaze UI Basic Tabs

View Discussion
Improve Article
Save Article
  • Last Updated : 05 May, 2022
View Discussion
Improve Article
Save Article

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=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </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=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </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=
            </blaze-tab>
  
            <blaze-tab header="Tab 4" open>
                GeeksforGeeks
            </blaze-tab>
        </blaze-tabs>
    </div>
</body>
  
</html>

Output:

Blaze UI Basic Tabs

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!