mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
94402d394c
* chore(toggle) use debounce helper * refactor(toggle) set attributes declaratively * fix(toggle) set name instead of value, default value to on
ion-toggle
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.
<!-- 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 slot="end" value="pepperoni" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle slot="end" value="sausage" disabled></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle slot="end" value="mushrooms"></ion-toggle>
</ion-item>
</ion-list>
Properties
checked
boolean
color
string
disabled
boolean
mode
name
string
The name of the control, which is submitted with the form data.
value
string
Attributes
checked
boolean
color
string
disabled
boolean
mode
name
string
The name of the control, which is submitted with the form data.
value
string
Events
ionBlur
ionChange
ionFocus
ionStyle
Built by StencilJS