正文

Radio Button Widgets

单选按钮部件

A radio button is a form control that allows a user to choose a single option from among several. For example, if a user is asked to enter a phone number, they could then choose from a group of radio buttons to indicate whether the number is for their home, work, or cell phone.

单选按钮是一种表单控件，允许用户从多个选项中选择一个选项。例如，如果用户被要求输入一个电话号码，那么他们可以从一组单选按钮中进行选择，以指示该号码是用于他们的家庭、工作还是移动电话。

1、Radio Groups

单选按钮组

In most design patterns, selecting a radio button will automatically deselect any previously selected radio button in the same group. In Axure RP, you can create this relationship between a set of radio buttons by adding them to a "radio group":

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

1. Select one or more radio button widgets on the canvas or in the Outline pane.
   在画布或 Outline 窗格中选择一个或多个单选按钮小部件。

2. In the More Properties menu in the Interactions Pane , enter a name for the new radio group in the Assign Radio Group field.
   在 交互窗格 中的 More Properties 菜单中，在**Assign radio group **字段中输入新电台组的名称。

3. Add more radio buttons to the radio group by selecting them and choosing the radio group name in the Assign Radio Group dropdown.
   通过选择单选按钮并在**Assign radio group **下拉列表中选择radio group名称，向radio group添加更多单选按钮。

4. Remove a radio button from the radio group by selecting it and clearing the Assign Radio Group field's selection.
   通过选择并清除**Assign radio group **字段的选择，从radio group中移除单选按钮。

Note
提示

Removing all radio buttons from a radio group will delete the group.
从单选组中删除所有单选按钮将删除该组。

2、Button Size and Alignment

按钮大小和对齐方式

In the Button section of the Style pane, you can use the Size field to set the width and height of the button portion of the radio button.

在 Style 窗格的 Button 部分，您可以使用 Size 字段设置单选按钮的按钮部分的宽度和高度。

By default, the button portion of a radio button is on the left, and the label text is on the right. To swap the order so that the text is on the left and the button is on the right, use the Align icons to the right of the Size field.

默认情况下，单选按钮的按钮部分位于左侧，标签文本位于右侧。要交换顺序，使文本位于左侧而按钮位于右侧，请使用 Size 字段右侧的 Align 图标。

3、Editing the Label Text

编辑标签文本

You can edit the text on a radio button widget's label via any of the options below:
你可以通过以下任一选项编辑单选按钮小部件标签上的文本:

• Double-click the button label to enter text-editing mode
  双击按钮标签进入文本编辑模式

• Select the button label and press ENTER to enter text-editing mode
  选择按钮标签，按 ENTER 进入文本编辑模式

• Right-click the button label and select Edit Text in the context menu
  右键单击按钮标签并在上下文菜单中选择 编辑文本

• Select the button label and begin typing. (This option is only available if you have disabled the single-key shortcuts)
  选择按钮标签并开始输入。(此选项仅在您禁用单键快捷方式时可用)

Selected by Default

By default, a radio button begins in its unselected state when the page first loads in the web browser. To instead have a radio button begin in its selected state, select the radio button and click its button on the canvas. You can also check the Selected option in the More Properties menu in the Interactions pane.

4、Special Interactions

特殊交互

4.1、Selecting a Radio Button

选择一个单选按钮

In the web browser, you can click a radio button to select it.
在web浏览器中，您可以单击单选按钮来选择它。

You can also dynamically select a radio button with the Set Selected/Checked action. The true option will select the radio button, and the false option will deselect it. The toggle option will set the radio button to the opposite of the state it's in when the interaction occurs.

您还可以使用 Set Selected/Checked 操作动态地选择单选按钮。 true 选项将选择单选按钮， false 选项将取消选择。 toggle 选项将把单选按钮设置为与交互发生时的状态相反的状态。

请到「今天看啥」查看全文