3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
11 <link rel=
"import" href=
"../polymer/polymer.html">
12 <link rel=
"import" href=
"../paper-ripple/paper-ripple.html">
13 <link rel=
"import" href=
"../paper-behaviors/paper-radio-button-behavior.html">
16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
17 by tapping or by dragging the switch.
21 <paper-toggle-button></paper-toggle-button>
25 The following custom properties and mixins are available for styling:
27 Custom property | Description | Default
28 ----------------|-------------|----------
29 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
30 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
31 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--dark-primary-color`
32 `--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--google-green-500`
33 `--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--google-green-500`
34 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
37 @element paper-toggle-button
41 <style is=
"custom-style">
43 --paper-toggle-button-unchecked-bar-color: #
000000;
44 --paper-toggle-button-unchecked-button-color: var(--paper-grey-
50);
45 --paper-toggle-button-unchecked-ink-color: var(--dark-primary-color);
47 --paper-toggle-button-checked-bar-color: var(--google-green-
500);
48 --paper-toggle-button-checked-button-color: var(--google-green-
500);
49 --paper-toggle-button-checked-ink-color: var(--google-green-
500);
53 <dom-module id=
"paper-toggle-button">
55 <link rel=
"import" type=
"css" href=
"paper-toggle-button.css">
59 <div id=
"toggleContainer">
60 <div id=
"toggleBar" class=
"toggle-bar"></div>
61 <div id=
"toggleButton" class=
"toggle-button">
62 <paper-ripple id=
"ink" class=
"toggle-ink circle" recenters
></paper-ripple>
70 is
: 'paper-toggle-button',
73 Polymer
.PaperRadioButtonBehavior
78 'aria-pressed': 'false',
84 * Fired when the checked state changes due to user interaction.
89 * Fired when the checked state changes.
94 * Gets or sets the state, `true` is checked and `false` is unchecked.
103 reflectToAttribute
: true,
105 observer
: '_checkedChanged'
109 * If true, the button toggles the active state with each tap or press
119 reflectToAttribute
: true
128 this._isReady
= true;
131 // button-behavior hook
132 _buttonStateChanged: function() {
137 this.checked
= this.active
;
141 _checkedChanged: function(checked
) {
142 this.active
= this.checked
;
143 this.fire('iron-change');
146 _ontrack: function(event
) {
147 var track
= event
.detail
;
148 if (track
.state
=== 'start') {
149 this._trackStart(track
);
150 } else if (track
.state
=== 'track') {
151 this._trackMove(track
);
152 } else if (track
.state
=== 'end') {
153 this._trackEnd(track
);
157 _trackStart: function(track
) {
158 this._width
= this.$.toggleBar
.offsetWidth
/ 2;
160 * keep an track-only check state to keep the dragging behavior smooth
161 * while toggling activations
163 this._trackChecked
= this.checked
;
164 this.$.toggleButton
.classList
.add('dragging');
167 _trackMove: function(track
) {
169 this._x
= Math
.min(this._width
,
170 Math
.max(0, this._trackChecked
? this._width
+ dx
: dx
));
171 this.translate3d(this._x
+ 'px', 0, 0, this.$.toggleButton
);
172 this._userActivate(this._x
> (this._width
/ 2));
175 _trackEnd: function(track
) {
176 this.$.toggleButton
.classList
.remove('dragging');
177 this.transform('', this.$.toggleButton
);