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=
"https://unpkg.com/onsenui@2.12.8/css/onsenui.css">
<link rel="stylesheet" href=
"https://unpkg.com/onsenui@2.12.8/css/onsen-css-components.min.css">
<link href=
"https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css"
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=
"https://unpkg.com/onsenui@2.12.8/css/onsenui.css">
<link rel="stylesheet" href=
"https://unpkg.com/onsenui@2.12.8/css/onsen-css-components.min.css">
<link href=
"https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css"
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: