javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(toggle): update toggle documentation

Browse Source
This commit is contained in:
Brandy Carney
2018-01-24 17:37:25 -05:00
parent 0d6c1255ac
commit b749e04345
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/core/src/components/toggle/readme.md
View File

@ -1,28 +1,41 @@
# ion-toggle # ion-toggle
A toggle is largely the same thing as an [checkbox](../checkbox), Toggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the `checked` property.
however, it also adds the ability to use gestures to swipe the
toggle on and off.
```html ```html
<!-- Default Toggle -->
<ion-toggle></ion-toggle>
<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>
<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>
<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>
<!-- Toggles in a List -->
<ion-list> <ion-list>
<ion-item> <ion-item>
<ion-label>Pepperoni</ion-label> <ion-label>Pepperoni</ion-label>
<ion-toggle value="pepperoni" checked></ion-toggle> <ion-toggle slot="end" value="pepperoni" checked></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Sausage</ion-label> <ion-label>Sausage</ion-label>
<ion-toggle value="sausage" disabled></ion-toggle> <ion-toggle slot="end" value="sausage" disabled></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>Mushrooms</ion-label> <ion-label>Mushrooms</ion-label>
<ion-toggle value="mushrooms"></ion-toggle> <ion-toggle slot="end" value="mushrooms"></ion-toggle>
</ion-item> </ion-item>
</ion-list> </ion-list>
``` ```