Toggle

API Reference

Overview

A two-state button that can be not only clicked but pressed. Hence, it has two states - pressed and unpressed (initial), which makes it look like checkbox that also has two states (checked and unchecked).

Toggle values can be defined separately for each state.

Initialization

{ view:"toggle", type:"iconButton", name:"s4", 
    offIcon:"pause",  onIcon:"play",
    offLabel:"Disabled", onLabel:"Enabled" 
}

Related sample:  Toggle Button ('toggle')

Main properties

  • name (string) - read-only property, defining the toggle's name. It should be unique within a page;
  • label (string) - text on the button body, one and the same for pressed and unpressed states;
  • onLabel (string) - text label on the button in a pressed state;
  • offLabel (string) - text label on the button in an unpressed state;
  • icon (string) - icon for pressed and unpressed toggle states;
  • onIcon (string) - icon for a pressed toggle;
  • offIcon (string) - icon for an unpressed toggle.

Icons taken from the Font Awesome, so pick the necessary icon name at their site.

Toggle Types

Toggle type is defined by the type property. If it isn't defined, a standard button is displayed. For image toggles there exist the following types:

  • iconButton for a standard button with an icon;
  • image for an image with a left-hand label (if any);
  • imageButton for a standard button with an image and a left-hand label;
  • imageTop for a picture and a label below it;
  • imageButtonTop for a standard button with a picture and a label under the picture;
  • next for a button with a right-hand arrow;
  • prev for a button with a left-handed arrow.

Types coincide with those of a standard button. Check their look and feel in the image below:

type:"iconButton"
type:"image"
type:"imageButton"
type:"imageTop"
type:"imageButtonTop"

Related sample:  Toggle Image Button ('toggle')

Back to top