Categories
28°C, New York
Home Blaze-UI Blaze UI Tabs Attributes

Blaze UI Tabs Attributes

Blaze UI Drawers Attributes

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;"> 
            w3wiki 
        </h1>
        <h3> 
            Blaze UI Tabs Attributes 
        </h3>
  
        <blaze-tabs>
            <blaze-tab type="brand" 
                 header="Tab 1" open>
                Welcome to w3wiki
            </blaze-tab>
  
            <blaze-tab type="info" 
                       header="Tab 2">
                A Computer Science portal for Beginner.
            </blaze-tab>
  
            <blaze-tab header="Tab 3">
                w3wiki
            </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;">  


            w3wiki  


        </h1> 


        <h3>  


            Blaze UI Tabs Attributes  


        </h3> 


  


        <blaze-tabs> 


            <blaze-tab type="brand" 


                 header="Tab 1" open> 


                Welcome to w3wiki 


            </blaze-tab> 


  


            <blaze-tab disabled  


                       header="Tab 2"> 


                A Computer Science portal for Beginner. 


            </blaze-tab> 


  


            <blaze-tab header="Tab 3"> 


                <img src= 


"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"> 


            </blaze-tab> 


        </blaze-tabs> 


    </div> 


</body> 


  


</html>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													
Blaze UI Tabs Attributes

													
													
												

												
												

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

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Blaze-UI
										
										#Blaze-UI Component
										
										#CSS
										
										#Web Technologies
										
										

									

									

										

											
										

										

											
											
												Blaze UI Drawers Attributes