ToggleButton

From WebOS101

Contents 1 Introduction 2 Creating a ToggleButton 2.1 HTML 2.2 Events 2.3 Attribute Properties 2.4 Model Properties 2.5 Methods 2.6 Styling

Introduction

The toggle button allows you to easily prompt the user for binary data: yes/no, on/off, etc.

Creating a ToggleButton

HTML

<div x-mojo-element="ToggleButton" id="togglebuttonId" class="togglebuttonClass" name="togglebuttonName"></div>

Properties	Required	Value	Description
x-mojo-element	Required	ToggleButton	Declares the widget as type 'ToggleButton'.
id	Required	Any String	Identifies the widget element for use when instantiating or rendering.

Events

Mojo.Event.listen(this.controller.get("togglebuttonId"), Mojo.Event.propertyChange, this.handleUpdate)</pre>
 
{| class="pretty"
|-
! Event Type
! Value
! Event Handling
|-
| Mojo.Event.propertyChange
| model:model attached to the widget
| property: model property, value: value of the checkbox.
|}
 
===Instantiation===
 
<code javascript>
this.controller.setupWidget("togglebuttonId",
    this.attributes = {
        trueValue: "On",
        falseValue: "Off"
    },
    this.model = {
        value: false,
        disabled: false
    }
);

Attribute Properties

Attribute Property	Type	Required	Default	Description
modelProperty	String	Optional	value	Model property name for togglebutton state.
disabledProperty	String	Optional	disabled	Model property name for disabled boolean.
trueValue	String	Optional	true	Value to set model property when true.
trueLabel	String	Optional	"On"	Label when toggle is true.
falseValue	String	Optional	false	Value to set model property when false.
falseLabel	String	Optional	"Off"	Label when toggle is false.
fieldName	String	Optional		DEPRECATED Idenitifer for the value of the toggle button; used when the toggle button is used in html forms.
inputName	String	Optional		Idenitifer for the value of the toggle button; used when the toggle button is used in html forms.

Model Properties

Model Property	Type	Required	Default	Description
value	User-defined	Required	none	Current value of widget.
disabled	Boolean	Optional	FALSE	If true, togglebutton is inactive.

Methods

There are no methods.

Styling

You can add a sliding animation which appears when toggling the switch on or off.

1. Add "toggle-text" class to the ToggleButton element in your HTML view. For example:

<div x-mojo-element="ToggleButton" id="my-toggle" class="right toggle-text"></div>

2. Add the following to your stylesheet:

.toggle-section .toggle-label {
  max-width: 60%;
  height: 52px;
  line-height: 50px;
  padding-left: 20px;
  float: left;
}
.sliding-toggle .toggle-text {
  position: relative;
}
.sliding-toggle .toggle-text span {
  position: relative;
  top: 0px;
  left: 1px;
  -webkit-transition-property: left;
  -webkit-transition-duration: .17s;
  -webkit-transition-timing-function: ease-in-out;
  z-index: 0;
}
.sliding-toggle .toggle-button {
  float: none;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  z-index: 1;
  background-position: top right !important;
  background-repeat: no-repeat !important;
  -webkit-transition-property: right, margin-right;
  -webkit-transition-duration: .17s;
  -webkit-transition-timing-function: ease-out;
}
.sliding-toggle .toggle-button.true {
  right: 0px;
}
.sliding-toggle .toggle-button.false + span {
  left: 25px;
}
.sliding-toggle .toggle-button.false {
  right: 100%;
  margin-right: -23px;
}