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 tabs for navigation. This is mostly used in making a navigation bar for a mobile UI. The Icon Tabbar is a type of tab bar where we can add icons along with labels in all the navigation tabs.
Onsen UI CSS Component Icon Tabbar Classes:
- tabbar: This class is added to the whole HTML div container that will hold the whole navigation bar.
- tabbar__item: This class is added to the tabs of the navigation bar.
- tabbar__button: This class is added to the button elements which can be clicked to change the tabs of the navigation bar.
- tabbar__icon: This class is added to the icons of the button elements which can be clicked to change the tabs of the navigation bar.
- tabbar__label: This class is added to specify the name of each tab of the navigation bar.
Syntax:
<div class="tabbar">
<label class="tabbar__item">
<input type="radio" name="tabbar-a" checked="...">
<button class="tabbar__button">
<i class=""></i>
<div class="tabbar__label"></div>
</button>
</label>
</div>
Example 1: In this example, we will use the Onsen UI CSS Component Icon Tabbar for creating the User Interface.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= <link rel="stylesheet" href= <link href= rel="stylesheet"> </head> <body> <div style="margin:2rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component Icon Tabbar </h3> <br/> </div> <div class="tabbar"> <label class="tabbar__item"> <input type="radio" name="tabbar-a" checked="checked"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-home"></i> <div class="tabbar__label"> Home </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-search"></i> <div class="tabbar__label"> Search </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> <div class="tabbar__label"> Profile </div> </button> </label> </div> </body> </html> |
Output:
Example 2: In the below example, you can see we can add numerous icons to the tabbar.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= <link rel="stylesheet" href= <link href= rel="stylesheet"> </head> <body> <div style="margin:2rem; font-family:Roboto, sans-serif;"> <h1 style="color:green;">GeeksforGeeks</h1> <h3 style="margin-top:-1.5rem;"> Onsen UI CSS Component Icon Tabbar </h3> <br /> </div> <div class="tabbar"> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-menu"></i> <div class="tabbar__label"> Settings </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a" checked="checked"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-stats"></i> <div class="tabbar__label"> Analytics </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-link"></i> <div class="tabbar__label"> Connect </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-home"></i> <div class="tabbar__label"> Home </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-search"></i> <div class="tabbar__label"> Search </div> </button> </label> <label class="tabbar__item"> <input type="radio" name="tabbar-a"> <button class="tabbar__button"> <i class="tabbar__icon ion-ios-person"></i> <div class="tabbar__label"> Profile </div> </button> </label> </div> </body> </html> |
Output:
Reference: https://onsen.io/v2/api/css.html#tabbar-category
Please Login to comment...