ToggleSwitch  - AS3 Flex

Package	spark.components
Class	public class ToggleSwitch
Inheritance	ToggleSwitch ToggleButtonBase ButtonBase SkinnableComponent UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object

The ToggleSwitch control has two positions: selected and unselected. By default, the label OFF corresponds to the unselected position and ON corresponds to the selected position.

The following image shows a ToggleSwitch control. The labels below the control show the current switch label and position:

Clicking anywhere in the control toggles the position. You can also slide the thumb along the track to change position. When you release the thumb, it moves to the position, selected or unselected, that is closest to the thumb location.

The ToggleSwitch control uses the following default values for the unselected and selected labels: OFF (unselected) and ON (selected). Define a custom skin to change the labels, or to change other visual characteristics of the control.

The following skin class, defined as a subclass of spark.skins.mobile.ToggleSwitchSkin, changes the labels to Yes and No:

  package skins
  // components\mobile\skins\MyToggleSwitchSkin.as
  {
      import spark.skins.mobile.ToggleSwitchSkin;
      
      public class MyToggleSwitchSkin extends ToggleSwitchSkin
      {
          public function MyToggleSwitchSkin()
          {
              super();
              // Set properties to define the labels 
              // for the selected and unselected positions.
              selectedLabel="Yes";
              unselectedLabel="No"; 
          }
      }
  }
  

Show MXML Syntax

Hide MXML Syntax

  <s:ToggleSwitch
   Properties
    selected="null"
 
   Common Styles
    accentColor="0x3F7FBA"
    slideDuration="125"
 
   Mobile Styles
    textShadowAlpha="0.65"
    textShadowColor="0x000000"
  >
  

Default MXML Propertylabel

View the examples

Related API Elements