单选按钮元件 #

单选按钮是一种允许用户从多个选项中选择一个的表单控件。例如,如果一个用户被要求输入一个电话号码,他们可以从一组单选按钮中选择,以表明该号码是用于他们的家庭、工作或手机。

单选按钮元件位于 Default 元件库的 Forms 部分。

单选组 #

在大多数设计模式中,选择一个单选按钮将自动取消对同一组中任何先前选定的单选按钮的选择。在 Axure RP 中,你可以通过将一组单选按钮添加到一个 “单选组” 中来创建它们之间的这种关系。

  1. 在画布上或在 Outline 面板中选择一个或多个单选按钮元件。

  2. Interactions Pane ,在 Assign Radio Group ,为新的单选组输入一个名称。

  3. 通过选择更多的单选按钮,并在 Assign Radio Group 下拉菜单中选择单选组名称,将其添加到单选组。

  4. 通过选择它并清除 Assign Radio Group 字段的选择,从单选组中删除一个单选按钮。

注意

从一个单选组中删除所有的单选按钮将删除该组。

按钮的尺寸和排列 #

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 事件,也就是单选按钮的 “提交按钮”。

要给单选按钮指定一个提交按钮。

  1. 选择单选按钮,然后在 Interactions 面板的下部点击 Show All

  2. Submit Button 下拉菜单中,从符合条件的元件列表中选择。

要取消提交按钮,请点击下拉菜单底部的 Unassign Submit Button

标签顺序 #

单选按钮和其他窗体元件的标签顺序是由它们的层深度决定的,如 Outline 面板中所示。你可以在 组织元件 (opens new window) 文章中了解更多关于这个问题以及如何改变一个元件的标签顺序。