Onsen UI CSS Component Material Tabbar Last Updated : 27 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like 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. Onsen UI CSS Components are pre-built CSS components that may be used to rapidly create adaptive and attractive user interface layouts. Onsen UI CSS Component Material Tabbar is used to create the material tabbar with some tabs using the below classes. Onsen UI CSS Component Material Tabbar Classes: tabbar--material: This class is used to create the material tabbar.tabbar--material__item: This class is used to create the material tabbar item.tabbar--material__button: This class is used to create the material tabbar button. Syntax: <div class="tabbar tabbar--top tabbar--material"> <label class="tabbar__item tabbar--material__item"> ... </label> ... </div> Example 1: The following example demonstrates the Onsen UI CSS Component Material 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 Material Tabbar </strong> <br> <br> <div class="tabbar tabbar--top tabbar--material"> <label class="tabbar__item tabbar--material__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button tabbar--material__button"> Item 1 </button> </label> <label class="tabbar__item tabbar--material__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button tabbar--material__button"> Item 2 </button> </label> <label class="tabbar__item tabbar--material__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button tabbar--material__button"> Item 3 </button> </label> </div> </center> </body> </html> Output: Example 2: The following example demonstrates the Onsen UI CSS Component Material 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 Material Tabbar </strong> <br> <br> <div class="tabbar tabbar--top tabbar--material"> <label class="tabbar__item tabbar--material__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button tabbar--material__button"> <i class="tabbar__icon ion-ios-menu"> </i> </button> </label> <label class="tabbar__item tabbar--material__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button tabbar--material__button"> <i class="tabbar__icon ion-ios-star"> </i> </button> </label> <label class="tabbar__item tabbar--material__item"> <input type="radio" name="tabs" checked="checked"> <button class="tabbar__button tabbar--material__button"> <i class="tabbar__icon ion-ios-hammer"> </i> </button> </label> </div> </center> </body> </html> Output: Reference: https://onsen.io/v2/api/css.html#tabbar-category Comment More infoAdvertise with us Next Article Onsen UI CSS Component Material Tabbar (Icon only) G gopaldhangar Follow Improve Article Tags : Web Technologies CSS Onsen-UI Onsen-UI CSS-Components Similar Reads Onsen UI CSS Component Material Toolbar 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. In this article, we will see the Onsen UI CSS Component Material Toolbar. The toolbar is a horizontal bar with some toolb 2 min read Onsen UI CSS Component Material Tabbar (Icon only) Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components compatible with mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to create adaptive and attractive user interface layouts rapidly. 2 min read Onsen UI CSS Component Icon Tabbar Onsen UI is a free open-source HTML5 framework for creating innovative and usable user interfaces (UI). It also simplifies user interface design, letting app developers concentrate on the program's functionality.The Tabbar is a CSS component that can be used to build a navigation bar that will have 3 min read Onsen UI CSS Component Material Toolbar Button 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. Onsen UI CSS Component Material Toolbar Button is used to create the material toolbar buttons using the toolbar-button--m 2 min read Onsen UI Tabbar CSS Components 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. In this article, we will discuss how to create Tabbar component 4 min read Onsen UI CSS Component Material Tabbar (Icon and Label) Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components compatible with mobile and desktop. Onsen UI CSS Components are pre-built CSS components that may be used to create adaptive and attractive user interface layouts rapidly. 3 min read Like