Onsen UI is an open-source, free tool for building distinctive and functional UIs. Additionally, it speeds up UI creation, letting app developers concentrate on the functionality of the software. Onsen UI is a sizable collection of strong user interface elements created especially for mobile apps. It is brimming with features that are ready to use and adhere to native iOS and Android design standards. AngularJS was the inspiration behind the creation of Onsen UI, however, it may also be used with jQuery or any other framework. An Onsen UI JavaScript Framework is built on PhoneGap and Cordova.
Pre-built CSS components called Onsen UI CSS Components can be used to quickly design flexible and appealing user interface layouts. The Onsen UI CSS components’ visual elements are all implemented using only CSS (cssnext). For mobile developers, Onsen CSS Components is a web-based Topcoat theme roller that makes developing gorgeous UIs simple.
Onsen UI’s Toolbar is a CSS component that is a horizontal bar that is used to store some toolbar items and icons. There are different types of Toolbars used for specific circumstances.
Onsen UI Toolbar CSS Components:
- Toolbar: This component is used to create the toolbar.
- Toolbar Item: This item is used to create the toolbar with some toolbar items.
- Toolbar with Outline Button: It is used to create the basic toolbar buttons.
- Toolbar with Bottom Bar: It is used to create the bottom bar inside the toolbar.
- Toolbar with Segment: It is used to create the segment inside the toolbar with some segment items.
- Material Toolbar: The toolbar is a horizontal bar with some toolbar items and icons. It is used to create the material toolbar.
- No Shadow Toolbar: No Shadow Toolbar is used to create the toolbar without shadow using toolbar–noshadow class.
- Material Toolbar with Icons: It is used to create the material toolbar with icons.
- Transparent Toolbar: It is used to create the transparent toolbar with some items using the toolbar–transparent class.
Syntax:
<div class="toolbar">
<div class="toolbar__left">
<span class="toolbar-button">
....
</span>
</div>
...
</div>Example 1: The code below demonstrates how to create a material toolbar with icons.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div class="toolbar toolbar--material">
<div class="toolbar__left toolbar--material__left">
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-menu"></i>
</span>
</div>
<div class="toolbar__center toolbar--material__center" style="color:green;">
Geeksforgeeks
</div>
<div class="toolbar__right toolbar--material__right">
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-search"></i>
</span>
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-plus"></i>
</span>
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-more-vert"></i>
</span>
</div>
</div>
<div style="margin:3rem;font-family:Roboto,sans-serif;">
<h3 style="margin-top:1rem;">
Onsen UI Toolbar CSS Components
</h3>
</div>
</body>
</html>
|
Output:
Example 2: The code below demonstrates how to create a transparent material toolbar.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div class="toolbar toolbar--material toolbar--transparent">
<div class="toolbar__left toolbar--material__left">
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-menu"></i>
</span>
</div>
<div class="toolbar__center toolbar--material__center" style="color:green;">
Geeksforgeeks
</div>
<div class="toolbar__right toolbar--material__right">
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-search"></i>
</span>
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-plus"></i>
</span>
<span class="toolbar-button toolbar-button--material">
<i class="zmdi zmdi-more-vert"></i>
</span>
</div>
</div>
<div style="margin:3rem;font-family:Roboto,sans-serif;">
<h3 style="margin-top:1rem;">
Onsen UI Toolbar CSS Components
</h3>
</div>
</body>
</html>
|
Output:
Example 3: The code below demonstrates the making of a toolbar with segments.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
</head>
<body>
<div class="toolbar">
<div class="toolbar__center">
<div class="segment" style="width:200px;margin:7px 50px;">
<div class="segment__item">
<input type="radio" class="segment__input" name="navi-segment-a" checked>
<div class="segment__button">First</div>
</div>
<div class="segment__item">
<input type="radio" class="segment__input" name="navi-segment-a">
<div class="segment__button">Second</div>
</div>
<div class="segment__item">
<input type="radio" class="segment__input" name="navi-segment-a">
<div class="segment__button">Third</div>
</div>
<div class="segment__item">
<input type="radio" class="segment__input" name="navi-segment-a">
<div class="segment__button">Fourth</div>
</div>
</div>
</div>
</div>
<div style="margin:3rem;font-family:Roboto,sans-serif;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3 style="margin-top:1rem;">
Onsen UI Toolbar CSS Components
</h3>
</div>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#toolbar-category