javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +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
A toggle is largely the same thing as an [checkbox](../checkbox),
however, it also adds the ability to use gestures to swipe the
toggle on and off.
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.
```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-item>
<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-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-label>Mushrooms</ion-label>
<ion-toggle value="mushrooms"></ion-toggle>
<ion-toggle slot="end" value="mushrooms"></ion-toggle>
</ion-item>
</ion-list>
```