7e50219d24
* theme-builder wip * Theme Builder updates - new CSS variable support - realtime color updating with alpha support (rgb generation) - auto tint/shade/contrast generation - auto step generation - CSS variable highlighting (forward and backwards) - Colourlovers Palette search (via local proxy) * Theme Builder Updates - Settings for auto generation - updated to 10 steps per background/ext - general cleanup - added instructions - re-worked shade/tint to mix black and white instead of lighten/darken - scoped cssText into component - apply theme to theme builder also to style internal buttons SCSS Updates - added 10 steps to reach platform - updated SCSS to use same mix and color methods as theme builder * material design color step fix * readme files fixes #13985 fixes #13986
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
If true, the toggle is selected. Defaults to false.
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "danger", "light", and "dark".
For more information, see Theming your App.
disabled
boolean
Indicates that the user cannot interact with the control.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
name
string
The name of the control, which is submitted with the form data.
value
string
the value of the toggle.
Attributes
checked
boolean
If true, the toggle is selected. Defaults to false.
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "danger", "light", and "dark".
For more information, see Theming your App.
disabled
boolean
Indicates that the user cannot interact with the control.
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
For more information, see Platform Styles.
name
string
The name of the control, which is submitted with the form data.
value
string
the value of the toggle.
Events
ionBlur
Emitted when the toggle loses focus.
ionChange
Emitted when the value property has changed.
ionFocus
Emitted when the toggle has focus.
ionStyle
Emitted when the styles change.
Built with StencilJS