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(checkbox): update checkbox documentation

Browse Source
This commit is contained in:
Brandy Carney
2018-01-24 17:40:56 -05:00
parent b749e04345
commit 352d96a9e0
1 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/core/src/components/checkbox/readme.md
View File

@ -1,29 +1,42 @@
# ion-checkbox # ion-checkbox
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
Placed in an `ion-item` or used as a stand-alone checkbox.
```html ```html
<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>
<ion-list> <!-- Disabled Checkbox -->
<ion-checkbox disabled></ion-checkbox>
<ion-item> <!-- Checked Checkbox -->
<ion-label>Pepperoni</ion-label> <ion-checkbox checked></ion-checkbox>
<ion-checkbox value="pepperoni" checked></ion-checkbox>
</ion-item>
<ion-item> <!-- Checkbox Colors -->
<ion-label>Sausage</ion-label> <ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox value="sausage" disabled></ion-checkbox> <ion-checkbox color="secondary"></ion-checkbox>
</ion-item> <ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<ion-item> <!-- Checkboxes in a List -->
<ion-label>Mushrooms</ion-label> <ion-list>
<ion-checkbox value="mushrooms"></ion-checkbox> <ion-item>
</ion-item> <ion-label>Pepperoni</ion-label>
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
</ion-item>
</ion-list> <ion-item>
<ion-label>Sausage</ion-label>
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
</ion-item>
</ion-list>
``` ```