checkbox 复选框

在线示例

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

  • XML 元素：checkbox

  • Java 类：JmixCheckbox

基本用法

checkbox 的基本示例：

<checkbox label="Create new document"
          value="true"/>
check box basics

数据绑定

该组件支持绑定至 data container 中的实体属性。

如需将 checkbox 绑定至实体属性：

  1. 使用 dataContainer 属性指定数据容器的名称。

  2. 使用 property 属性指定实体属性的名称。

实体属性必须为 Boolean 类型。

<data>
    <instance id="userDc"
              class="com.company.onboarding.entity.User">
        <fetchPlan extends="_base"/>
        <loader/>
    </instance>
</data>
<layout>
    <checkbox label="Active"
              dataContainer="userDc"
              property="active"
              id="checkbox"/>
</layout>
check box binding

XML 属性

id - alignSelf - ariaLabel - autofocus - classNames - colspan - dataContainer - enabled - height - indeterminate - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - requiredIndicatorVisible - tabIndex - value - visible - width

ariaLabel

MDN

设置 checkbox 的辅助功能标签。

indeterminate

Vaadin

设置 checkbox 的不确定状态。

根据 HTML5 标准，这个状态只是影响组件的外观，并不会影响组件的值。

value

定义 checkbox 的值，可以是 true 或 false。

事件和处理器

AttachEvent - BlurEvent - ClickEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

ClickEvent

当用户点击 checkbox 时，发送 com.vaadin.flow.component.ClickEvent 事件。

@Autowired
private Notifications notifications;

@Subscribe("checkbox")
public void onCheckboxClick(final ClickEvent<Checkbox> event) {
    if (Boolean.TRUE.equals(event.getSource().getValue())) {
        notifications.create("set")
                .show();
    } else {
        notifications.create("not set")
                .show();
    }
}

XML 内部元素

tooltip

参考

Vaadin 文档