switch 开关
用户可以通过 switch 在两种状态之间切换：on/off 或 true/false。该组件最适合用于启用/禁用设置，首选项或二进制选项。其视觉设计模仿带有滑动手柄的物理切换开关。
XML 元素 |
|
|---|---|
Java 类 |
|
XML 属性 |
id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - clickShortcut - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - tabIndex - value - visible - width |
事件和处理器 |
AttachEvent - BlurEvent - ClickEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent |
XML 内部元素 |
基本用法
switch 与 checkbox 组件类似，但可以更加直观地展示二进制状态。开关适合用于
-
在两个相互排斥的选项（例如on/off）之间切换。
-
提供即时的视觉反馈。
-
启用或禁用立即生效的设置。
而 checkbox 和 checkboxGroup 组件更适合下面的场景：
-
从列表中选择一个或多个选项。
-
允许多个非排他性选择。
-
选择后不会立即生效的场景。
switch 的基本示例：
<switch label="Enable Dark Mode"
value="true"/>
数据绑定
下面的示例生成了一个数据感知的 switch。实体属性必须为 Boolean 类型。
<data>
<instance id="userDc"
class="com.company.onboarding.entity.User"> (1)
<fetchPlan extends="_base"/> (2)
<loader/>
</instance>
</data>
<layout>
<switch label="Active"
dataContainer="userDc"
property="active"/> (3)
</layout>| 1 | User 实体的 InstanceContainer 容器。 |
| 2 | 容器内实体的内联 fetch plan。 |
| 3 | 将组件与数据容器和属性进行关联。dataContainer 属性使用 userDc 数据容器，property 引用 active 实体属性。 |
状态
switch 有以下几种状态，不同的状态具有不同的外观和功能。
启用
-
禁用：
switch处于非激活状态，无法与用户交互。通常显示为灰色，表示已禁用。 -
启用：
switch可进行交互并响应用户的输入。用户可以通过点击改变组件的状态。
XML 代码
<switch label="Enable Dark Mode"
value="true"
enabled="false"/>
<switch label="Enable Dark Mode"
value="true"
enabled="true"/>只读
readOnly 属性控制用户是否可以更改组件的状态。如果设置为 true，则 checkbox 为只读状态，用户无法更改状态。
XML 代码
<switch label="Enable Dark Mode"
value="true"
readOnly="false"/>
<switch label="Enable Dark Mode"
value="true"
readOnly="true"/>必填
switch 也可以通过 required 配置或绑定一个带 @NotNull 验证的必需属性设置为必填项。
当该组件标记为必填时，组件标签附近会显示一个指示器，提示用户必须选择。如果 switch 默认开启（已选择），然后被关闭（取消选择），则该组件会标记为无效，直至满足必填条件。
与输入字段类似，只有当 switch 非空（即勾选）时才能通过 @NotNull 验证。该行为的默认值可以通过 jmix.ui.component.checkbox-required-state-initialization-enabled 属性修改，以支持非选择状态为 false。
|
