Onsen UI is a free open-source HTML5 framework for creating unique and usable UIs (UI). It also streamlines UI development, allowing app developers to focus on the program’s functionality. Onsen UI is a large collection of powerful user interface components designed specifically for mobile apps and packed with ready-to-use features that follow native iOS and Android design standards. Onsen UI was created with AngularJS in mind, however, it may be used with jQuery or any other framework. Onsen UI is a PhoneGap and Cordova-based JavaScript Framework.
Onsen UI CSS Components are pre-built CSS components that may be used to rapidly create adaptive and attractive user interface layouts. The visual aspects of the Onsen UI CSS components are all implemented in pure CSS (cssnext). Onsen CSS Components is a web-based Topcoat theme roller for mobile developers that makes creating beautiful UIs a breeze.
Onsen UI CSS Components used Classes:
- switch: This class is added to the label element which encloses the whole switch inside it.
- switch__input: This class is added to the input element which shows the input in the switch which is generally either on or off or switch handle to the right or left side.
- switch__toggle: This class is added to an element that lets switch toggle which means generally either on or off or switch handle to the right or left side.
- switch__handle: This class is used to add a name to the switch.
Syntax:
<label class="switch">
<input class="switch__input" disabled>
<div class="switch__toggle">
<div class="switch__handle"></div>
</div>
</label>Attributes:
- disabled: Adding this attribute makes the switch always disabled by default.
- checked: Adding this attribute makes the switch always checked by default.
Example 1: In the below-given code we are going to see how to make a checked and an unchecked switch by using the switch__toggle class and the checked attribute.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<title>Onsen UI CSS Component Basic Switch</title>
</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 Basic Switch
</h3><br />
</div>
<div style="margin-left: 10rem;">
<label class="switch">
<input type="checkbox" class="switch__input">
<div class="switch__toggle">
<div class="switch__handle"></div>
</div>
</label>
<label class="switch">
<input type="checkbox" class="switch__input" checked>
<div class="switch__toggle">
<div class="switch__handle"></div>
</div>
</label>
</div>
</body>
</html>
|
Output:
Example 2: In the below-given code we are going to see how to make a checked and a disabled switch by using the switch__toggle class and the disabled attribute. Add a name/label/tag to the handles of the switch with the help of the switch__handle class.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<title>Onsen UI CSS Component Basic Switch</title>
</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 Basic Switch
</h3><br />
</div>
<div style="margin-left: 10rem;">
<label class="switch">
<input type="checkbox" class="switch__input">
<div class="switch__toggle">
<div class="switch__handle">G</div>
</div>
</label>
<label class="switch">
<input type="checkbox" class="switch__input" disabled>
<div class="switch__toggle">
<div class="switch__handle">F</div>
</div>
</label>
<label class="switch">
<input type="checkbox" class="switch__input">
<div class="switch__toggle">
<div class="switch__handle">G</div>
</div>
</label>
</div>
</body>
</html>
|
Output:
Reference: https://onsen.io/v2/api/css.html#notification-category