复选框元件 #
在用户输入表单中,复选框为用户提供了一个二元选择。复选框可以用于一个单一的选择,如是否订阅邮件列表等。
复选框元件位于 Default 元件库的 Forms 部分。
复选框的尺寸和排列方式 #
在 Style 面板的 Button 部分,你可以使用 Size 字段来设置复选框的方框部分的宽度和高度。
默认情况下,复选框的方框部分在左边,而标签文本在右边。Align 要调换顺序,使文本在左边,方框在右边,请使用 Size 字段右边的图标。
提示
当用从右到左的语言(如阿拉伯语或希伯来语)进行表格原型设计时,将方框向右对齐。
编辑标签文本 #
你可以通过以下任何一个选项来编辑复选框元件的标签上的文字。
- 双击复选框标签,进入文本编辑模式
- 选择复选框标签并按下 回车 键,进入文本编辑模式
- 右键单击复选框标签,在上下文菜单中选择 Edit Text 。
- 选择复选框标签并开始输入。
特殊属性 #
默认勾选 #
默认情况下,当页面第一次在浏览器中加载时,复选框开始处于未选中状态。
要让一个复选框开始处于选中状态,请选择该复选框并在画布上点击其方框。
你也可以在 Interactions 面板中选中 Selected 选项。
禁用 #
禁用一个复选框可以防止用户在浏览器中与它交互。这也会激活元件的 禁用效果 (opens new window) ,使它看起来是灰色的。
有两种方法可以禁用一个元件。
选中 Interactions 面板底部的 Disabled 复选框。
用 Enable/Disable 动作在浏览器中动态地禁用该元件。你可以作为任何交互的一部分来做,比如当页面加载或点击按钮时。
提示
你可以用 Enable/Disable 动作在网页浏览器中动态地启用一个被禁用的元件。
特殊的 Interactions(交互) #
勾选和取消选中复选框 #
在浏览器中,你可以点击一个复选框来选中和取消选中。
你也可以设置来选中和取消选中的状态。true 值选项将选中该复选框,而 false 选项将取消选中。toggle 选项将把复选框设置为与交互发生时的状态相反。
提交按钮 #
当一个复选框在浏览器中拥有焦点时按下 回车 键,可以触发页面上另一个元件的 Click or Tap 事件,也就是复选框的 “提交按钮”。
要给复选框指定一个提交按钮。
选择复选框,并在 Interactions 面板的下部点击 Show All 。
在 Submit Button 下拉菜单中,从符合条件的元件列表中选择。
要取消提交按钮的分配,请点击下拉菜单底部的 Unassign Submit Button 。
限制和解决方法 #
不确定的状态 #
在一些设计模式中,复选框有第三种 “不确定” 状态,即既不勾选也不取消选中。如果你需要一个可以有三种状态的复选框,你可以使用 形状元件 (opens new window) 和 dynamic panel (opens new window) 来制作一个自定义复选框。
标签顺序 #
复选框和其他窗体元件的标签顺序是由它们的层深度决定的,如 Outline 面板中所示。你可以在 组织元件 (opens new window) 文章中了解更多关于这个问题以及如何改变元件的标签顺序。