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.
<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.
Example 2: In the below example, you can see we can add numerous icons to the tabbar.
Please Login to comment...