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 --> |
| 9 |
| 10 <!-- |
| 11 @group Paper Elements |
| 12 |
| 13 `paper-button` is a button containing text or an image. When the user touches |
| 14 the button, a ripple effect emanates from the point of contact. |
| 15 |
| 16 A `paper-button` may be flat or raised. A raised button behaves like a piece |
| 17 of paper resting on another sheet, and lifts up upon press. Flat buttons do |
| 18 not raise up. Add the `raisedButton` attribute to make a raised button. |
| 19 |
| 20 Example: |
| 21 |
| 22 <paper-button label="flat button"></paper-button> |
| 23 <paper-button label="raised button" raisedButton></paper-button> |
| 24 |
| 25 A button should be styled with a background color, text color, ripple color |
| 26 and hover color. |
| 27 |
| 28 To style the background, text and hover color, apply the `background` and |
| 29 `color` CSS properties to the button. To style the ripple color, apply the |
| 30 `color` CSS property to the `#ripple` element in the button's shadow root: |
| 31 |
| 32 /* Style #my-button blue with white text and darker blue ink. */ |
| 33 #my-button { |
| 34 background: #4285f4; |
| 35 color: #fff; |
| 36 } |
| 37 |
| 38 #my-button:hover { |
| 39 background: #2a56c6; |
| 40 } |
| 41 |
| 42 #my-button::shadow #ripple { |
| 43 color: #2a56c6; |
| 44 } |
| 45 |
| 46 @element paper-button |
| 47 @extends paper-focusable |
| 48 --> |
| 49 |
| 50 <link href="../polymer/polymer.html" rel="import"> |
| 51 <link href="../core-icon/core-icon.html" rel="import"> |
| 52 <link href="../paper-focusable/paper-focusable.html" rel="import"> |
| 53 <link href="../paper-ripple/paper-ripple.html" rel="import"> |
| 54 <link href="../paper-shadow/paper-shadow.html" rel="import"> |
| 55 |
| 56 <polymer-element name="paper-button" extends="paper-focusable" attributes="label
raisedButton iconSrc icon" role="button" assetpath=""> |
| 57 |
| 58 <template> |
| 59 |
| 60 <link href="paper-button.css" rel="stylesheet"> |
| 61 |
| 62 <template if="{{raisedButton}}"> |
| 63 <div fit="" id="shadow-container"> |
| 64 <paper-shadow id="shadow" z="{{z}}" animated=""></paper-shadow> |
| 65 </div> |
| 66 </template> |
| 67 |
| 68 <div id="clip"> |
| 69 <!-- <div id="focusBg"></div> --> |
| 70 <paper-ripple id="ripple"></paper-ripple> |
| 71 <div id="content"> |
| 72 <template if="{{iconSrc || icon}}"> |
| 73 <core-icon id="icon" src="{{iconSrc}}" icon="{{icon}}"></core-icon> |
| 74 </template> |
| 75 <template if="{{label}}"> |
| 76 <span>{{label}}</span> |
| 77 </template> |
| 78 </div> |
| 79 </div> |
| 80 |
| 81 </template> |
| 82 |
| 83 |
| 84 </polymer-element> |
| 85 <script src="paper-button-extracted.js"></script> |
OLD | NEW |