checkbox 复选框
checkbox 是一个拥有两个状态的组件：选中或者未选中。
XML 元素 |
|
|---|---|
Java 类 |
|
XML 属性 |
id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - clickShortcut - colspan - css - dataContainer - enabled - focusShortcut - height - indeterminate - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - tabIndex - value - visible - width |
事件和处理器 |
AttachEvent - BlurEvent - ClickEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent |
XML 内部元素 |
数据绑定
下面的示例生成了一个数据感知的 checkbox。实体属性必须为 Boolean 类型。
<data>
<instance id="userDc"
class="com.company.onboarding.entity.User"> (1)
<fetchPlan extends="_base"/> (2)
<loader/>
</instance>
</data>
<layout>
<checkbox id="checkbox"
label="Active"
dataContainer="userDc"
property="active"/> (3)
</layout>| 1 | User 实体的 InstanceContainer 容器。 |
| 2 | 容器内实体的内联 fetch plan。 |
| 3 | 将组件与数据容器和属性进行关联。dataContainer 属性使用 userDc 数据容器，property 引用 active 实体属性。 |
状态
checkbox 有以下几种状态，不同的状态具有不同的外观和功能。
启用
-
启用：复选框可进行交互并响应用户的输入。用户可以通过点击改变组件的状态。
-
禁用：复选框禁用，无法与用户交互。通常显示为灰色，表示已禁用。
XML 代码
<checkbox label="The enabled checkbox"
value="true"
enabled="true"/>
<checkbox label="The disabled checkbox"
enabled="false"
value="true"/>只读
readOnly 属性控制用户是否可以更改组件的状态。如果设置为 true，则 checkbox 为只读状态，用户无法更改状态。
XML 代码
<checkbox label="The readOnly checkbox"
value="true"
readOnly="true"/>
<checkbox label="The editable checkbox"
readOnly="false"
value="true"/>不确定态
indeterminate 属性控制 checkbox 是否处于一个不确定的状态，既非全选中，也非不选中。
在外观上，组件展示为一个单独的不确定态。
| 根据 HTML5 标准，这个状态只是影响组件的外观，并不会影响组件的值。 |
XML 代码
<checkbox label="With indeterminate state = true"
value="false"
indeterminate="true"/>
<checkbox label="With indeterminate state = false"
indeterminate="false"
value="false"/>点击事件
com.vaadin.flow.component.ClickEvent 当用户点击组件时发送。处理方法需要指定下列三种类型的点击之一。
-
click - 点击时触发
-
singleClick - 在一定的延时后触发，以确保不是双击。
-
doubleClick - 当双击组件时触发。
示例：
当用户点击 checkbox 时，发送 com.vaadin.flow.component.ClickEvent 事件。
@Autowired
private Notifications notifications;
@Subscribe(id = "checkbox", subject = "clickListener")
public void onCheckboxClick(final ClickEvent<JmixCheckbox> event) {
if (event.getSource().getValue()){
notifications.show("Set");
} else {
notifications.show("Not set");
}
}