| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 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 | |
| 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 | |
| 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 | |
| 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 <!-- | |
| 12 `paper-ripple` provides a visual effect that other paper elements can | |
| 13 use to simulate a rippling effect emanating from the point of contact. The | |
| 14 effect can be visualized as a concentric circle with motion. | |
| 15 | |
| 16 Example: | |
| 17 | |
| 18 <paper-ripple></paper-ripple> | |
| 19 | |
| 20 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple | |
| 21 effect when touches on it. You can also defeat the default behavior and | |
| 22 manually route the down and up actions to the ripple element. Note that it is | |
| 23 important if you call downAction() you will have to make sure to call | |
| 24 upAction() so that `paper-ripple` would end the animation loop. | |
| 25 | |
| 26 Example: | |
| 27 | |
| 28 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | |
| 29 ... | |
| 30 downAction: function(e) { | |
| 31 this.$.ripple.downAction({x: e.x, y: e.y}); | |
| 32 }, | |
| 33 upAction: function(e) { | |
| 34 this.$.ripple.upAction(); | |
| 35 } | |
| 36 | |
| 37 Styling ripple effect: | |
| 38 | |
| 39 Use CSS color property to style the ripple: | |
| 40 | |
| 41 paper-ripple { | |
| 42 color: #4285f4; | |
| 43 } | |
| 44 | |
| 45 Note that CSS color property is inherited so it is not required to set it on | |
| 46 the `paper-ripple` element directly. | |
| 47 | |
| 48 By default, the ripple is centered on the point of contact. Apply the `recenter
s` | |
| 49 attribute to have the ripple grow toward the center of its container. | |
| 50 | |
| 51 <paper-ripple recenters></paper-ripple> | |
| 52 | |
| 53 You can also center the ripple inside its container from the start. | |
| 54 | |
| 55 <paper-ripple center></paper-ripple> | |
| 56 | |
| 57 Apply `circle` class to make the rippling effect within a circle. | |
| 58 | |
| 59 <paper-ripple class="circle"></paper-ripple> | |
| 60 | |
| 61 @group Paper Elements | |
| 62 @element paper-ripple | |
| 63 @hero hero.svg | |
| 64 @demo demo/index.html | |
| 65 --> | |
| 66 | |
| 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 | |
| 78 <style> | |
| 79 :host { | |
| 80 display: block; | |
| 81 position: absolute; | |
| 82 border-radius: inherit; | |
| 83 overflow: hidden; | |
| 84 top: 0; | |
| 85 left: 0; | |
| 86 right: 0; | |
| 87 bottom: 0; | |
| 88 } | |
| 89 | |
| 90 :host([animating]) { | |
| 91 /* This resolves a rendering issue in Chrome (as of 40) where the | |
| 92 ripple is not properly clipped by its parent (which may have | |
| 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. */ | |
| 98 -webkit-transform: translate(0, 0); | |
| 99 transform: translate3d(0, 0, 0); | |
| 100 } | |
| 101 | |
| 102 :host([noink]) { | |
| 103 pointer-events: none; | |
| 104 } | |
| 105 | |
| 106 #background, | |
| 107 #waves, | |
| 108 .wave-container, | |
| 109 .wave { | |
| 110 pointer-events: none; | |
| 111 position: absolute; | |
| 112 top: 0; | |
| 113 left: 0; | |
| 114 width: 100%; | |
| 115 height: 100%; | |
| 116 } | |
| 117 | |
| 118 #background, | |
| 119 .wave { | |
| 120 opacity: 0; | |
| 121 } | |
| 122 | |
| 123 #waves, | |
| 124 .wave { | |
| 125 overflow: hidden; | |
| 126 } | |
| 127 | |
| 128 .wave-container, | |
| 129 .wave { | |
| 130 border-radius: 50%; | |
| 131 } | |
| 132 | |
| 133 :host(.circle) #background, | |
| 134 :host(.circle) #waves { | |
| 135 border-radius: 50%; | |
| 136 } | |
| 137 | |
| 138 :host(.circle) .wave-container { | |
| 139 overflow: hidden; | |
| 140 } | |
| 141 | |
| 142 </style> | |
| 143 <template> | |
| 144 <div id="background"></div> | |
| 145 <div id="waves"></div> | |
| 146 </template> | |
| 147 </dom-module> | |
| 148 <script src="paper-ripple-extracted.js"></script></body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1155683008:
Rename polymer and cr_elements v0_8 to v1_0 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@v1