CheckBox

在 ChatGPT 中打开

Shadow dwc-checkbox 23.01

Java API

CheckBox 类创建了一个可以被选中或取消选中的组件，并向用户显示其状态。单击时，框内出现一个勾号，以指示肯定选择（开启）。再次单击时，勾号消失，表示否定选择（关闭）。

通过提供清晰而直接的视觉指示，以显示选择状态，复选框增强了用户交互和决策制定，使其成为现代用户界面中的一个重要元素。

Usages

CheckBox 最适用于用户需要从一系列选项中进行多个选择的场景。以下是一些使用 CheckBox 的示例：

1. 任务或功能选择：当用户需要选择多个任务或功能以执行某些操作或配置时，通常会使用复选框。

2. 偏好设置：涉及偏好或设置面板的应用程序通常使用复选框，以允许用户从一组选项中选择多个选项。这最适合不互斥的选项。例如：

• 启用或禁用通知
• 选择深色模式或浅色模式主题
• 选择电子邮件通知偏好

3. 过滤或排序：在需要用户选择多个过滤器或类别的应用程序中，可以使用 CheckBox，例如过滤搜索结果或选择多个项目进行进一步操作。

4. 表单输入：复选框通常用于表单中，以允许用户选择多个选项或进行二元选择。例如：

   • 订阅新闻通讯
   • 同意条款和条件
   • 选择购买或预订的项目

Text and positioning

复选框可以利用 setText(String text) 方法，文本将根据内置的 Position 接近复选框。

复选框具有设置文本功能，可以选择在框的右侧或左侧显示文本。默认情况下，文本将在组件的右侧显示。文本的位置通过使用 Position 枚举来支持。下面是两个设置：

显示代码

Java

Indeterminism

CheckBox 组件支持不确定性，这是一种常用于表单和列表的 UI 模式，以指示一组复选框具有选中和未选中状态的混合状态。这种状态由第三种视觉状态表示，通常显示为复选框内的填充方块或短划线。不确定性有一些常见的用例：

• 选择多个项目：当用户需要从列表或一组选项中选择多个项目时，不确定性非常有用。它允许用户表示他们希望选择一些但不是全部可用选项。

• 层次数据：不确定性可以在复选框之间存在层次关系的场景中使用。例如，在选择类别和子类别时，不确定性可以表示某些子类别被选中而其他子类别未被选中，父组件处于不确定状态。

显示代码

Java

Styling

Expanses

以下 Expanses 值 允许在不使用 CSS 的情况下快速设置样式。 使用 Expanse 枚举类来支持 Expanses。下面是复选框组件支持的扩展：

显示代码

Java

Loading...

Best practices

为了确保在使用 Checkbox 组件时获得最佳用户体验，请考虑以下最佳实践：

1. 清晰标记选项：为每个 CheckBox 选项提供清晰简明的标签，以准确描述选项。标签应易于理解，并能相互区分。

2. 分组复选框：将相关的复选框分组在一起，以指示它们的关联性。这有助于用户理解在特定组内可以选择多个选项。

3. 提供默认选择：如果适用，考虑为复选框提供默认选择，以指导用户首次遇到选项时的选择。默认选择应与最常见或首选的选择相一致。

4. 不确定性：如果父 CheckBox 组件有多个属于它的子组件，其中某些组件可以被选中而其他被取消选中，请使用不确定属性来显示并非所有 CheckBox 组件都是选中或未选中的。