ion-checkbox
复选框允许从一组选项中选择多个选项。激活时，它们会显示为选中（打钩）。点击复选框将切换 checked 属性。也可以通过设置 checked 属性来以编程方式选中它们。
🌐 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.
基本用法
🌐 Basic Usage
标签放置
🌐 Label Placement
开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置方式。此属性对应于 flexbox 的 flex-direction 属性。
🌐 Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.
对齐
🌐 Alignment
开发者可以使用 alignment 属性来控制标签和控件在交叉轴上的对齐方式。该属性对应于 flexbox 的 align-items 属性。
🌐 Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.
可以使用 alignment 属性对堆叠的复选框进行对齐。当标签和控件需要水平居中时，这会很有用。
齐行
🌐 Justification
开发者可以使用 justify 属性来控制标签和控件在一行上的排列方式。该属性对应于 flexbox 的 justify-content 属性。
🌐 Developers can use the justify property to control how the label and control are packed on a line. This property mirrors the flexbox justify-content property.
ion-item 仅在演示中使用，以强调 justify 的工作原理。justify 正常工作并不需要它。
不确定的复选框
🌐 Indeterminate Checkboxes
标签内的链接
🌐 Links inside of Labels
复选框标签有时可以附带链接。这些链接可以提供与复选框相关的更多信息。然而，点击链接不应选中复选框。为了实现这一点，我们可以使用 stopPropagation 来阻止点击事件冒泡。使用这种方法时，标签的其余部分仍然可以点击。
🌐 Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use stopPropagation to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
辅助程序和错误文本
🌐 Helper & Error Text
帮助文本和错误文本可以在使用 helperText 和 errorText 属性的复选框中使用。除非将 ion-invalid 和 ion-touched 类添加到 ion-checkbox，否则错误文本不会显示。这确保了在用户有机会输入数据之前不会显示错误。
🌐 Helper and error text can be used inside of a checkbox with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-checkbox. This ensures errors are not shown before the user has a chance to enter data.
在 Angular 中，这通过表单验证自动补齐。在 JavaScript、React 和 Vue 中，需要根据你自己的验证手动添加类。
🌐 In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
主题化
🌐 Theming
CSS 自定义属性
🌐 CSS Custom Properties
接口
🌐 Interfaces
CheckboxChangeEventDetail
interface CheckboxChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
CheckboxCustomEvent
虽然不是必需的，但可以使用此接口替代 CustomEvent 接口，以便对从此组件发出的 Ionic 事件进行更强类型的处理。
🌐 While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface CheckboxCustomEvent<T = any> extends CustomEvent {
detail: CheckboxChangeEventDetail<T>;
target: HTMLIonCheckboxElement;
}
属性
🌐 Properties
alignment
| Description | How to control the alignment of the checkbox and label on the cross axis. "start": The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. "center": The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox display to block. |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
checked
| Description | If true, the checkbox is selected. |
| Attribute | checked |
| Type | boolean |
| Default | false |
color
| Description | 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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the user cannot interact with the checkbox. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
errorText
| Description | Text that is placed under the checkbox label and displayed when an error is detected. |
| Attribute | error-text |
| Type | string ｜ undefined |
| Default | undefined |
helperText
| Description | Text that is placed under the checkbox label and displayed when no error is detected. |
| Attribute | helper-text |
| Type | string ｜ undefined |
| Default | undefined |
indeterminate
| Description | If true, the checkbox will visually appear as indeterminate. |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
justify
| Description | How to pack the label and checkbox within a line. "start": The label and checkbox will appear on the left in LTR and on the right in RTL. "end": The label and checkbox will appear on the right in LTR and on the left in RTL. "space-between": The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox display to block. |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
labelPlacement
| Description | Where to place the label relative to the checkbox. "start": The label will appear to the left of the checkbox in LTR and to the right in RTL. "end": The label will appear to the right of the checkbox in LTR and to the left in RTL. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked": The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the alignment property. |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | The name of the control, which is submitted with the form data. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
required
| Description | If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. |
| Attribute | required |
| Type | boolean |
| Default | false |
value
| Description | The value of the checkbox does not mean if it's checked or not, use the checked property for that.The value of a checkbox is analogous to the value of an <input type="checkbox">, it's only used when the checkbox participates in a native <form>. |
| Attribute | value |
| Type | any |
| Default | 'on' |
事件
🌐 Events
| Name | Description | Bubbles |
|---|---|---|
ionBlur | Emitted when the checkbox loses focus. | true |
ionChange | Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the checked property. | true |
ionFocus | Emitted when the checkbox has focus. | true |
方法
🌐 Methods
No public methods available for this component.
CSS 阴影部分
🌐 CSS Shadow Parts
| Name | Description |
|---|---|
container | The container for the checkbox mark. |
error-text | Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched. |
helper-text | Supporting text displayed beneath the checkbox label when the checkbox is valid. |
label | The label text describing the checkbox. |
mark | The checkmark used to indicate the checked state. |
supporting-text | Supporting text displayed beneath the checkbox label. |
CSS 自定义属性
🌐 CSS Custom Properties
- iOS
- MD
| Name | Description |
|---|---|
--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 |
--checkbox-background | Background of the checkbox icon |
--checkbox-background-checked | Background of the checkbox icon when checked |
--checkmark-color | Color of the checkbox checkmark when checked |
--checkmark-width | Stroke width of the checkbox checkmark |
--size | Size of the checkbox icon |
--transition | Transition of the checkbox icon |
| Name | Description |
|---|---|
--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 |
--checkbox-background | Background of the checkbox icon |
--checkbox-background-checked | Background of the checkbox icon when checked |
--checkmark-color | Color of the checkbox checkmark when checked |
--checkmark-width | Stroke width of the checkbox checkmark |
--size | Size of the checkbox icon |
--transition | Transition of the checkbox icon |
插槽
🌐 Slots
| Name | Description |
|---|---|
| `` | The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox. |