| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --><!-- | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| 10 |
| 11 <!-- |
| 9 `paper-ripple` provides a visual effect that other paper elements can | 12 `paper-ripple` provides a visual effect that other paper elements can |
| 10 use to simulate a rippling effect emanating from the point of contact. The | 13 use to simulate a rippling effect emanating from the point of contact. The |
| 11 effect can be visualized as a concentric circle with motion. | 14 effect can be visualized as a concentric circle with motion. |
| 12 | 15 |
| 13 Example: | 16 Example: |
| 14 | 17 |
| 15 <paper-ripple></paper-ripple> | 18 <paper-ripple></paper-ripple> |
| 16 | 19 |
| 17 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple | 20 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple |
| 18 effect when touches on it. You can also defeat the default behavior and | 21 effect when touches on it. You can also defeat the default behavior and |
| 19 manually route the down and up actions to the ripple element. Note that it is | 22 manually route the down and up actions to the ripple element. Note that it is |
| 20 important if you call mousedownAction() you will have to make sure to call | 23 important if you call downAction() you will have to make sure to call |
| 21 mouseupAction() so that `paper-ripple` would end the animation loop. | 24 upAction() so that `paper-ripple` would end the animation loop. |
| 22 | 25 |
| 23 Example: | 26 Example: |
| 24 | 27 |
| 25 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | 28 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
| 26 ... | 29 ... |
| 27 downAction: function(e) { | 30 downAction: function(e) { |
| 28 this.$.ripple.mousedownAction({x: e.x, y: e.y}); | 31 this.$.ripple.downAction({x: e.x, y: e.y}); |
| 29 }, | 32 }, |
| 30 upAction: function(e) { | 33 upAction: function(e) { |
| 31 this.$.ripple.mouseupAction(); | 34 this.$.ripple.upAction(); |
| 32 } | 35 } |
| 33 | 36 |
| 34 Styling ripple effect: | 37 Styling ripple effect: |
| 35 | 38 |
| 36 Use CSS color property to style the ripple: | 39 Use CSS color property to style the ripple: |
| 37 | 40 |
| 38 paper-ripple { | 41 paper-ripple { |
| 39 color: #4285f4; | 42 color: #4285f4; |
| 40 } | 43 } |
| 41 | 44 |
| 42 Note that CSS color property is inherited so it is not required to set it on | 45 Note that CSS color property is inherited so it is not required to set it on |
| 43 the `paper-ripple` element directly. | 46 the `paper-ripple` element directly. |
| 44 | 47 |
| 45 By default, the ripple is centered on the point of contact. Apply the `recenter
s` | 48 By default, the ripple is centered on the point of contact. Apply the `recenter
s` |
| 46 attribute to have the ripple grow toward the center of its container. | 49 attribute to have the ripple grow toward the center of its container. |
| 47 | 50 |
| 48 <paper-ripple recenters></paper-ripple> | 51 <paper-ripple recenters></paper-ripple> |
| 49 | 52 |
| 53 You can also center the ripple inside its container from the start. |
| 54 |
| 55 <paper-ripple center></paper-ripple> |
| 56 |
| 50 Apply `circle` class to make the rippling effect within a circle. | 57 Apply `circle` class to make the rippling effect within a circle. |
| 51 | 58 |
| 52 <paper-ripple class="circle"></paper-ripple> | 59 <paper-ripple class="circle"></paper-ripple> |
| 53 | 60 |
| 54 @group Paper Elements | 61 @group Paper Elements |
| 55 @element paper-ripple | 62 @element paper-ripple |
| 56 @homepage github.io | 63 @hero hero.svg |
| 57 --><!-- | 64 @demo demo/index.html |
| 58 Fired when the animation finishes. This is useful if you want to wait until the
ripple | 65 --> |
| 59 animation finishes to perform some action. | |
| 60 | |
| 61 @event transitionend | |
| 62 @param {Object} detail | |
| 63 @param {Object} detail.node The animated node | |
| 64 --><html><head><link rel="import" href="../polymer/polymer.html"> | |
| 65 | 66 |
| 66 </head><body><dom-module id="paper-ripple"> | 67 </head><body><dom-module id="paper-ripple"> |
| 68 |
| 69 <!-- |
| 70 Fired when the animation finishes. This is useful if you want to wait until th
e ripple |
| 71 animation finishes to perform some action. |
| 72 |
| 73 @event transitionend |
| 74 @param {Object} detail |
| 75 @param {Object} detail.node The animated node |
| 76 --> |
| 77 |
| 67 <style> | 78 <style> |
| 68 :host { | 79 :host { |
| 69 display: block; | 80 display: block; |
| 70 position: absolute; | 81 position: absolute; |
| 71 border-radius: inherit; | 82 border-radius: inherit; |
| 72 overflow: hidden; | 83 overflow: hidden; |
| 73 top: 0; | 84 top: 0; |
| 74 left: 0; | 85 left: 0; |
| 75 right: 0; | 86 right: 0; |
| 76 bottom: 0; | 87 bottom: 0; |
| 88 } |
| 77 | 89 |
| 78 /* This resolves a rendering issue in Chrome 40 where the | 90 :host([animating]) { |
| 91 /* This resolves a rendering issue in Chrome (as of 40) where the |
| 79 ripple is not properly clipped by its parent (which may have | 92 ripple is not properly clipped by its parent (which may have |
| 80 rounded corners. See: http://jsbin.com/temexa/4 */ | 93 rounded corners). See: http://jsbin.com/temexa/4 |
| 94 |
| 95 Note: We only apply this style conditionally. Otherwise, the browser |
| 96 will create a new compositing layer for every ripple element on the |
| 97 page, and that would be bad. */ |
| 81 -webkit-transform: translate(0, 0); | 98 -webkit-transform: translate(0, 0); |
| 82 transform: translate3d(0, 0, 0); | 99 transform: translate3d(0, 0, 0); |
| 83 } | 100 } |
| 84 | 101 |
| 85 :host([noink]) { | 102 :host([noink]) { |
| 86 pointer-events: none; | 103 pointer-events: none; |
| 87 } | 104 } |
| 88 | 105 |
| 89 #background, | 106 #background, |
| 90 #waves, | 107 #waves, |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 122 overflow: hidden; | 139 overflow: hidden; |
| 123 } | 140 } |
| 124 | 141 |
| 125 </style> | 142 </style> |
| 126 <template> | 143 <template> |
| 127 <div id="background"></div> | 144 <div id="background"></div> |
| 128 <div id="waves"></div> | 145 <div id="waves"></div> |
| 129 </template> | 146 </template> |
| 130 </dom-module> | 147 </dom-module> |
| 131 <script src="paper-ripple-extracted.js"></script></body></html> | 148 <script src="paper-ripple-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1162563004:
Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master