Onsen UI CSS Component Basic Switch
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.
<label class="switch"> <input class="switch__input" disabled> <div class="switch__toggle"> <div class="switch__handle"></div> </div> </label>
- 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.
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.