checkbox 复选框

checkbox 是一个拥有两个状态的组件：选中或者未选中。

XML 元素

checkbox

Java 类

JmixCheckbox

基本用法

在线示例

checkbox 的基本示例：

<checkbox id="carField" label="I have a car"/>

数据感知的 checkbox

在线示例

数据绑定是指将组件与 数据容器 进行关联。可视化组件或相应数据容器中的更改可以触发彼此的更新。有关详细信息，请参阅 使用数据组件。

下面的示例生成了一个数据感知的 checkbox。实体属性必须为 Boolean 类型。

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <checkbox id="activeCheckbox"
              label="Checkbox connected to a container"
              dataContainer="customerDc"
              property="active"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

customerDc 实例容器加载了一个 Customer 实体及其本地属性。dataContainer 属性将组件与数据容器绑定，property 属性表示用组件处理布尔类型的 active 实体属性。

状态

checkbox 有以下几种状态，不同的状态具有不同的外观和功能。

启用

  • 启用：复选框可进行交互并响应用户的输入。用户可以通过点击改变组件的状态。

  • 禁用：复选框禁用，无法与用户交互。通常显示为灰色，表示已禁用。

<checkbox label="The enabled checkbox"
          value="true"
          enabled="true"/>
<checkbox label="The disabled checkbox"
          enabled="false"
          value="true"/>

只读

readOnly 属性控制用户是否可以更改组件的状态。如果设置为 true，则 checkbox 为只读状态，用户无法更改状态。

<checkbox label="The readOnly checkbox"
          value="true"
          readOnly="true"/>
<checkbox label="The editable checkbox"
          readOnly="false"
          value="true"/>

不确定态

indeterminate 属性控制 checkbox 是否处于一个不确定的状态，既非全选中，也非不选中。

在外观上，组件展示为一个单独的不确定态。

根据 HTML5 标准，这个状态只是影响组件的外观，并不会影响组件的值。 
<checkbox label="With indeterminate state = true"
          value="false"
          indeterminate="true"/>
<checkbox label="With indeterminate state = false"
          indeterminate="false"
          value="false"/>

必填

复选框也可以通过 required 配置或绑定一个带 @NotNull 验证的必需属性设置为必填项。

与输入字段类似，只有当复选框非空（即勾选）时才能通过 @NotNull 验证。该行为的默认值可以通过 jmix.ui.component.checkbox-required-state-initialization-enabled 属性修改，以支持非选择状态为 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");
    }
}

XML 属性

下面是 checkbox 的特殊属性：

名称 描述 默认值

enabled

设置 checkbox 启用或禁用。参阅 启用状态。

true

indeterminate

设置 checkbox 为不确定态。参阅 不确定状态。

false

readOnly

设置 checkbox 为只读模式。参阅 只读状态。

false

required

设置 checkbox 的必填状态。参阅 必填状态。

false

value

设置组件的值。

—

下面是 checkbox 支持的其他通用属性：

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - clickShortcut - colspan - css - dataContainer - focusShortcut - height - label - maxHeight - maxWidth - minHeight - minWidth - property - tabIndex - visible - width

事件和处理器

下面是 checkbox 的特殊事件和处理器：

名称 描述

ClickEvent

当用户点击组件是发送 com.vaadin.flow.component.ClickEvent 事件。参阅 点击事件。

下面是 checkbox 支持的其他通用事件：

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent

XML 内部元素

一个 checkbox 可以包含 tooltip 作为内部元素。

参考