mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
e416c23b3b
- splits the item min height by mode - removes padding end from the slotted end components in favor of using 16px on the item - updates the icon color to lighter gray (rgb) - removes font size change from text wrapped labels - add list spec test to include MD examples fixes #14799
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.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked |
checked |
If true, the checkbox is selected. |
boolean |
false |
color |
color |
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
string | undefined |
undefined |
disabled |
disabled |
If true, the user cannot interact with the checkbox. |
boolean |
false |
mode |
mode |
The mode determines which platform styles to use. | "ios" | "md" |
undefined |
name |
name |
The name of the control, which is submitted with the form data. | string |
this.inputId |
value |
value |
The value of the toggle does not mean if it's checked or not, use the checked property for that. The value of a toggle is analogous to the value of a <input type="checkbox">, it's only used when the toggle participates in a native <form>. |
string |
'on' |
Events
| Event | Description | Detail |
|---|---|---|
ionBlur |
Emitted when the toggle loses focus. | void |
ionChange |
Emitted when the checked property has changed. | CheckedInputChangeEvent |
ionFocus |
Emitted when the toggle has focus. | void |
ionStyle |
Emitted when the styles change. | StyleEvent |
CSS Custom Properties
| Name | Description |
|---|---|
--background |
Background of the checkbox icon |
--background-checked |
Background of the checkbox icon when checked |
--border-color |
Border color of the checkbox icon |
--border-color-checked |
Border color of the checkbox icon when checked |
--border-radius |
Border radius of the checkbox icon |
--border-style |
Border style of the checkbox icon |
--border-width |
Border width of the checkbox icon |
--checkmark-color |
Color of the checkbox checkmark when checked |
--height |
Height of the checkbox icon |
--transition |
Transition of the checkbox icon |
--width |
Width of the checkbox icon |
Built with StencilJS