forked from OnsenUI/playground
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathswitch.html
More file actions
74 lines (61 loc) · 1.68 KB
/
Copy pathswitch.html
File metadata and controls
74 lines (61 loc) · 1.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onsen UI App</title>
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="center">Switches</div>
</ons-toolbar>
<ons-list ng-init="cool = true; evenCooler = false; amazing = false">
<ons-list-header>Settings</ons-list-header>
<ons-list-item>
<div class="center">
Enable cool feature: {{cool}}
</div>
<div class="right">
<ons-switch ng-model="cool"></ons-switch>
</div>
</ons-list-item>
<ons-list-item>
<div class="center">
Enable even cooler feature: {{evenCooler}}
</div>
<div class="right">
<ons-switch ng-model="evenCooler"></ons-switch>
</div>
</ons-list-item>
<ons-list-item>
<div class="center">
Enable amazing feature: {{amazing}}
</div>
<div class="right">
<ons-switch disabled ng-model="amazing"></ons-switch>
</div>
</ons-list-item>
</ons-list>
</ons-page>
</body>
</html>
<!-- info
## Switches
A switch is an UI element that can be used to toggle between two states.
The state of a switch in Onsen UI can be changed both by dragging the knob and by tapping on the switch.
To make the switch enabled by default you can use the `checked` attribute just like with radio buttons and checkboxes.
```
<ons-switch checked>
</ons-switch>
```
To disable the switch the `disabled` attribute is used.
```
<ons-switch disabled>
</ons-switch>
```
## Getting the value
`ons-switch` can be combined with `ng-model` in order to bind its value with a scope variable.
-->