© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

TRY IT!

 

TOGGLE SWITCH

Make two kinds of toggle switches for a mobile interface.

STEP 1:  TOGGLE INTERACTION

Select the "Toggle Switch 1" dynamic panel on the canvas. In the Properties tab of the Inspector, double-click "OnClick" to add a new OnClick case.


In the Case Editor, choose the "Set Panel State" action. Under "Configure actions", check "This Widget".


At the bottom of the right column, choose "Next" in the "Select state" dropdown, and check the box for "Wrap from last to first". This option will allow the dynamic panel to go back to its first state after the last state has been reached.


Click "OK" to close the Case Editor.

STEP 3: PREVIEW

Preview the prototype. Click the second toggle switch to toggle it on and off.


MORE RESOURCES

SETUP

In the mobile training document, open the page named "Toggle Switch". On the canvas are the beginnings of two toggle switches, the "Toggle Switch 1" dynamic panel and the "Toggle Switch 2" group.

TOGGLE SWITCH 1 - NOT ANIMATED

The "Toggle Switch 1" dynamic panel has two states, an "Off" state and an "On" state. Each state contains a "handle" ellipse—one in the off position and one in the on position—on top of a "background" rectangle. (You can mouse over the state names in the Outline pane to see what each looks like.)


We'll be toggling back and forth between these two states to simulate a toggle switch.

STEP 2: PREVIEW

Preview the prototype. Click the first toggle switch to toggle it on and off.


TOGGLE SWITCH 2 - ANIMATED

The "Toggle Switch 2" widget group contains two widgets, a "handle" ellipse and a "background" rectangle. The "handle" ellipse has a Selected interaction style set up. (If you haven't worked with interaction styles before, check out our Interactive Button tutorial to learn more.)


We'll be moving the "handle" ellipse left and right and toggling its Selected state to simulate a toggle switch.

STEP 1: SET GROUP TO SELECTED AND MOVE "HANDLE" TO THE RIGHT

Select the "Toggle Switch 2" group on the canvas. In the Properties tab of the Inspector, double-click "OnClick" to add a new OnClick case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


Set the first dropdown to "is selected of", and change "equals" to "does not equal". Leave the other fields as they are. This condition will evaluate to "true" when the group is not in the Selected state.


Click "OK" to close the Condition Builder.

In the Case Editor, choose the "Selected" action under "Set Selected/Checked". Under "Configure actions", check "This Widget". Setting the group to Selected in this way will also set the group's child widgets to Selected.

 

In the left column of the Case Editor, choose the "Move" action. Under "Configure actions", check the "handle" ellipse that appears under "Toggle Switch 2".


At the bottom of the right column, enter "20" in the "x" field. (This will move the widget 20px to the right.) Select "swing" in the "Animate" dropdown, and enter "250" in the "t" field.


Click "OK" to close the Case Editor.

 

STEP 2: UNSELECT GROUP AND MOVE "HANDLE" BACK TO THE LEFT

With the "Toggle Switch 2" group still selected, double-click "OnClick" in the Properties tab of the Inspector again to set up a second OnClick case.


In the Case Editor, choose the "Not Selected" action under "Set Selected/Checked". Under "Configure actions", check "This Widget".


Back in the left column, choose the "Move" action. Under "Configure actions", check the "handle" ellipse that appears under "Toggle Switch 2".


At the bottom of the right column, enter "-20" in the "x" field. (This will move the widget 20px to the left.) Select "swing" in the "Animate" dropdown. (Notice that the "t" field uses the same value, 250, that we entered in the first "Move" action.)


Click "OK" to close the Case Editor.


Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog.

Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog.

STEP 0: DOWNLOAD THE MOBILE TRAINING FILE

If you don't already have it, download AxureMobileTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure mobile tutorials module.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

Note: Notice that even though we didn't set up a condition for this case, it shows the condition "Else If True". This case will fire if the first case doesn't pass, i.e. when the "Toggle Switch 2" group is in the Selected state.