Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(371)

Side by Side Diff: third_party/polymer/v1_0/components/paper-toggle-button/paper-toggle-button.html

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
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.g ithub.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/CONTRI BUTORS.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/PATEN TS.txt
9 -->
10
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">
14
15 <!--
16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
17 by tapping or by dragging the switch.
18
19 Example:
20
21 <paper-toggle-button></paper-toggle-button>
22
23 ### Styling
24
25 The following custom properties and mixins are available for styling:
26
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 t he input is not checked | `--dark-primary-color`
32 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--google-green-500`
33 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--google-green-500`
34 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
35
36 @group Paper Elements
37 @element paper-toggle-button
38 @hero hero.svg
39 @demo demo/index.html
40 -->
41 <style is="custom-style">
42 :root {
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);
46
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);
50 }
51 </style>
52
53 <dom-module id="paper-toggle-button">
54
55 <link rel="import" type="css" href="paper-toggle-button.css">
56
57 <template>
58
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-rippl e>
63 </div>
64 </div>
65
66 </template>
67
68 <script>
69 Polymer({
70 is: 'paper-toggle-button',
71
72 behaviors: [
73 Polymer.PaperRadioButtonBehavior
74 ],
75
76 hostAttributes: {
77 role: 'button',
78 'aria-pressed': 'false',
79 tabindex: 0
80 },
81
82 properties: {
83 /**
84 * Fired when the checked state changes due to user interaction.
85 *
86 * @event change
87 */
88 /**
89 * Fired when the checked state changes.
90 *
91 * @event iron-change
92 */
93 /**
94 * Gets or sets the state, `true` is checked and `false` is unchecked.
95 *
96 * @attribute checked
97 * @type boolean
98 * @default false
99 */
100 checked: {
101 type: Boolean,
102 value: false,
103 reflectToAttribute: true,
104 notify: true,
105 observer: '_checkedChanged'
106 },
107
108 /**
109 * If true, the button toggles the active state with each tap or press
110 * of the spacebar.
111 *
112 * @attribute toggles
113 * @type boolean
114 * @default true
115 */
116 toggles: {
117 type: Boolean,
118 value: true,
119 reflectToAttribute: true
120 }
121 },
122
123 listeners: {
124 track: '_ontrack'
125 },
126
127 ready: function() {
128 this._isReady = true;
129 },
130
131 // button-behavior hook
132 _buttonStateChanged: function() {
133 if (this.disabled) {
134 return;
135 }
136 if (this._isReady) {
137 this.checked = this.active;
138 }
139 },
140
141 _checkedChanged: function(checked) {
142 this.active = this.checked;
143 this.fire('iron-change');
144 },
145
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);
154 }
155 },
156
157 _trackStart: function(track) {
158 this._width = this.$.toggleBar.offsetWidth / 2;
159 /*
160 * keep an track-only check state to keep the dragging behavior smooth
161 * while toggling activations
162 */
163 this._trackChecked = this.checked;
164 this.$.toggleButton.classList.add('dragging');
165 },
166
167 _trackMove: function(track) {
168 var dx = track.dx;
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));
173 },
174
175 _trackEnd: function(track) {
176 this.$.toggleButton.classList.remove('dragging');
177 this.transform('', this.$.toggleButton);
178 }
179
180 });
181 </script>
182
183 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698