Blaze UI is a CSS open-source lightweight UI toolkit that 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.
Blaze UI Tabs are useful to create tabbed content where we can separate the contents based on some division. They are easy and helpful to toggle between different content without jumping from page to page or around the webpage.
Blaze UI Tab Attributes:
- type: This attribute asks for the color of the tab.
- open: We need to specify the tab that should be open on the first load.
- disabled: This takes a boolean value and sets the tabs to not open.
- header: We need to pass the name of the tab.
Blaze UI Tab Methods:
- currentTab(): This method returns the current open tab.
- openTab(): This method takes the tab index and opens it.
Blaze UI CSS Tabs:
- Basic Tabs: It is a basic type of tab that can be used to switch the content into different pages.
- Colors Tabs: It is used to create color tabs. To create the color tabs, we will use color classes.
- Active Tabs: It is used to create an active tab.
Syntax:
<blaze-tabs>
<blaze-tab type="brand" header="..." open>
...
</blaze-tab>
<blaze-tab header="...">
...
</blaze-tab>
</blaze-tabs>Example 1: In the following example, we have three tabs with some content.
<!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>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong> Blaze UI Tabs </strong> <br> <br>
<blaze-tabs>
<blaze-tab type="brand" header="Data Structures" open>
<h4>Data Structures</h4>
<ul style="list-style-type: none;">
<li>Stack</li>
<li>Queue</li>
<li>Array</li>
</ul>
</blaze-tab>
<blaze-tab header="Algorithms" type="info">
<h4>Algorithms</h4>
<ul style="list-style-type: none;">
<li>Searching</li>
<li>Sorting</li>
<li>Greedy</li>
</ul>
</blaze-tab>
<blaze-tab header="Languages" type="success">
<h4>Languages</h4>
<ul style="list-style-type: none;">
<li>Java</li>
<li>C++</li>
<li>Python3</li>
</ul>
</blaze-tab>
</blaze-tabs>
</center>
</div>
</body>
</html>
|
Output:
Blaze UI Tabs
Example 2: In the following example, we will check the tab number that is currently opened using the tab methods.
<!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>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong> Blaze UI Tabs </strong>
<br> <br>
<button class="c-button c-alert--warning" onclick="checkCurrent()">
Check Current Open Tab
</button>
<blaze-tabs id="tabs">
<blaze-tab type="brand" header="Data Structures" open>
<h4>Data Structures</h4>
<ul style="list-style-type: none;">
<li>Stack</li>
<li>Queue</li>
<li>Array</li>
</ul>
</blaze-tab>
<blaze-tab header="Algorithms" type="info">
<h4>Algorithms</h4>
<ul style="list-style-type: none;">
<li>Searching</li>
<li>Sorting</li>
<li>Greedy</li>
</ul>
</blaze-tab>
<blaze-tab header="Languages" type="success">
<h4>Languages</h4>
<ul style="list-style-type: none;">
<li>Java</li>
<li>C++</li>
<li>Python3</li>
</ul>
</blaze-tab>
</blaze-tabs>
</center>
</div>
<script>
const checkCurrent = async () => {
let tab = await $('#tabs').get(0).currentTab()
alert(`The current opened tab index is ${tab + 1}`)
}
</script>
</body>
</html>
|
Output:
Blaze UI Tabs
Reference: https://www.blazeui.com/components/tabs/