Prototype library website-Original release of lecturer Jin Wu, which can be freely reproduced. Please indicate the source!
Axure Official Website: www.axurerp.cn
Axurerp7.0 parts details
Radio button
Common Cases
In the form
A single-choice button is often used to switch from one group to another.
This option can trigger interaction on the page or cross-page interaction of stored variable values.
Edit radio button
Radio button group
After a single-choice button is added to a group, only one of the buttons can be set to the selected status at a time.
Select the radio button that you want to add to the Group, right-click the button group to specify the radio button group, or set the radio button group name in the property Panel of the component.
If you want to add unnecessary radio buttons to the Group, right-click the -- Specify radio button group, and select the corresponding radio button group name in the pop-up dialog box.
To remove the radio button from the group, right-click the group and choose -- Specify radio button to clear the group name and click OK.
This post shares visible content
Radio button group case
Preview Effect
Alignment Mode
By default, the single button is on the left and the text is on the right. You can adjust the left and right positions through the Component Property panel.
Disable radio button
By default, the single-choice button is enabled, but in some cases, the single-choice button must be disabled. You can right-click to disable the radio button or select to disable it on the component properties panel.
Set default or dynamic selection
You can click the single-choice button in the design area to set to default, or right-click to select. In this way, the generate prototype radio button is selected by default.
You can also set the selected status dynamically by setting the select or select action.
Common interactions
Click Disable/enable text
You can click the single button to add a mouse-click event.
Because the single-choice button automatically switches in the single-choice button group, you do not need to add more than one use case or make logical judgments like the check box.
Click to enable text widget
Preview Effect
Dynamically switch the selected status
You can use the single-choice button to dynamically switch the selected status using the set selection/select action.
This example shows how to dynamically switch the selected status of the radio button.
Download case
Effect Preview
Select the display content based on the single-choice button
You can set the single-choice button to dynamically control the display status of the dynamic panel using conditions.
If the value of the selected value is "Single-choice button" and the value is true, an action is executed to set the dynamic panel status after the condition is determined.
This post shares visible content
Download case
View results
Use Single-choice buttons for cross-page Interaction
The use of single-choice buttons usually changes the elements on other pages. This stores variable values by judging whether the single-choice button is selected or true.
In this example, click the submit button to set the variable value based on the selected radio button. On the next page, the dynamic panel status is displayed by judging the variable value based on the page loading event.
This post shares visible content
Download case
View demo
Limitations of Single-choice buttons
The single-choice button is a fixed height and width. You can change the text but cannot change the button shape.
Axurerp7.0 basic tutorial series components radio button