Open In App

Onsen UI CSS Component Bordered Top Tabbar

Last Updated : 27 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

Tabbar is used to create the Tabs using Onsen UI classes. Onsen UI CSS Component Bordered Top Tabbar is used to create the bordered tabbar at the top using Onsen UI Tabbar classes.

Onsen UI CSS Component Bordered Top Tabbar Classes:

  • tabbar–top-border: This class is used to create the bordered tabbar at the top.
  • tabbar–top-border__item: This class is used to create the bordered tabbar item at the top.
  • tabbar–top-border__button: This class is used to create the bordered tabbar button at the top.

Syntax:

<div class="tabbar tabbar--top 
            tabbar--top-border">
  <label class="tabbar__item 
           tabbar--top-border__item">
    ...
  </label>
  ...
</div>

Example 1: The following example demonstrates the Onsen UI CSS Component Bordered Top Tabbar.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src=
"https://unpkg.com/onsenui/js/onsenui.min.js">
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <strong>
            Onsen UI CSS Component Bordered Top Tabbar
        </strong> <br> <br>
  
        <div class="tabbar tabbar--top 
                    tabbar--top-border">
            <label class="tabbar__item 
                             tabbar--top-border__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--top-border__button">
                    Item 1
                </button>
            </label>
          
            <label class="tabbar__item 
                          tabbar--top-border__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--top-border__button">
                    Item 2
                </button>
            </label>
          
            <label class="tabbar__item 
                          tabbar--top-border__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--top-border__button">
                    Item 3
                </button>
            </label>
          
            <label class="tabbar__item 
                          tabbar--top-border__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--top-border__button">
                    Item 4
                </button>
            </label>
        </div>
    </center>
</body>
  
</html>
 






                        










Output:


 


Example 2: The following example demonstrates the Onsen UI CSS Component Bordered Top Tabbar.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <!-- CDN links of Onsen UI library -->


    <link rel="stylesheet" href= 


"https://unpkg.com/onsenui/css/onsenui.css"> 


    <link rel="stylesheet" href= 


"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 


    <script src= 


"https://unpkg.com/onsenui/js/onsenui.min.js"> 


    </script> 


</head> 


  


<body> 


    <center> 


        <h2 style="color: green;"> 


            GeeksforGeeks 


        </h2> 


        <strong> 


            Onsen UI CSS Component Bordered Top Tabbar 


        </strong> <br> <br> 


  


        <div class="tabbar tabbar--top  


                    tabbar--top-border"> 


            <label class="tabbar__item  


                             tabbar--top-border__item"> 


                <input type="radio" name="tabs" 


                       checked="checked"> 


                <button class="tabbar__button  


                        tabbar--top-border__button"> 


                    <i class="tabbar__icon  


                              ion-ios-menu"> 


                    </i> 


                </button> 


            </label> 


          


            <label class="tabbar__item  


                             tabbar--top-border__item"> 


                <input type="radio" name="tabs" 


                       checked="checked"> 


                <button class="tabbar__button  


                        tabbar--top-border__button"> 


                    <i class="tabbar__icon  


                              ion-ios-hammer"> 


                    </i> 


                </button> 


            </label> 


          


            <label class="tabbar__item  


                             tabbar--top-border__item"> 


                <input type="radio" name="tabs" 


                       checked="checked"> 


                <button class="tabbar__button  


                        tabbar--top-border__button"> 


                    <i class="tabbar__icon  


                              ion-ios-star"> 


                    </i> 


                </button> 


            </label> 


          


            <label class="tabbar__item  


                             tabbar--top-border__item"> 


                <input type="radio" name="tabs" 


                       checked="checked"> 


                <button class="tabbar__button  


                        tabbar--top-border__button"> 


                    <i class="tabbar__icon  


                              ion-ios-calendar"> 


                    </i> 


                </button> 


            </label> 


        </div> 


    </center> 


</body> 


  


</html>



















                        







                        










Output:


 


Reference: https://onsen.io/v2/api/css.html#tabbar-category


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Onsen UI CSS Component Top Tabbar
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Onsen UI CSS Component Top Tabbar
            

        
    
        
            

                Onsen UI CSS Component Material Tabbar (Icon and Label)
            

        
    
        
            

                Onsen UI CSS Component Icon Only Tabbar
            

        
    
        
            

                Onsen UI CSS Component Icon Tabbar
            

        
    
        
            

                Onsen UI CSS Component Material Tabbar (Icon only)
            

        
    
        
            

                Onsen UI CSS Component Material Tabbar
            

        
    
        
            

                Onsen UI CSS Component Basic Tabbar
            

        
    
        
            

                Onsen UI Tabbar CSS Components
            

        
    
        
            

                Pure CSS Bordered Table
            

        
    
        
            

                Onsen UI CSS Component Popover (top)
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        gopaldhangar                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox