Blaze UI Tabs Methods
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 = "https://unpkg.com/@blaze/css@10.0.4/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 > < style > body { font-family: sans-serif; } </ style > </ head > < body > < div class = "u-centered" > < h2 style = "color:green;" > w3wiki </ 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 = "https://unpkg.com/@blaze/css@10.0.4/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 > < style > body { font-family: sans-serif; } </ style > </ head > < body > < div class = "u-centered" > < h2 style = "color: green;" > w3wiki </ 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
Contact Us