Onsen UI CSS Component Material Tabbar
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;" > w3wiki </ 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;" > w3wiki </ 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
Contact Us