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.
<!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.
<!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