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.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 9 --> 10 11 <link rel="import" href="../polymer/polymer.html"> 12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 13 <link rel="import" href="../paper-behaviors/paper-button-behavior.html"> 14 <link rel="import" href="../paper-material/paper-material.html"> 15 16 <!-- 17 Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html) 18 19 `paper-button` is a button. When the user touches the button, a ripple effect emanates 20 from the point of contact. It may be flat or raised. A raised button is styled with a 21 shadow. 22 23 Example: 24 25 <paper-button>Flat button</paper-button> 26 <paper-button raised>Raised button</paper-button> 27 <paper-button noink>No ripple effect</paper-button> 28 <paper-button toggles>Toggle-able button</paper-button> 29 30 A button that has `toggles` true will remain `active` after being clicked (and 31 will have an `active` attribute set). For more information, see the `Polymer.IronButtonState` 32 behavior. 33 34 You may use custom DOM in the button body to create a variety of buttons. For example, to 35 create a button with an icon and some text: 36 37 <paper-button> 38 <iron-icon icon="favorite"></iron-icon> 39 custom button content 40 </paper-button> 41 42 To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button` will already 43 receive focus, you may want to prevent the anchor tag from receiving focus as well by setting 44 its tabindex to -1. 45 46 <a href="https://www.polymer-project.org/" tabindex="-1"> 47 <paper-button raised>Polymer Project</paper-button> 48 </a> 49 50 ### Styling 51 52 Style the button with CSS as you would a normal DOM element. 53 54 paper-button.fancy { 55 background: green; 56 color: yellow; 57 } 58 59 paper-button.fancy:hover { 60 background: lime; 61 } 62 63 paper-button[disabled], 64 paper-button[toggles][active] { 65 background: red; 66 } 67 68 By default, the ripple is the same color as the foreground at 25% opacity. You may 69 customize the color using the `--paper-button-ink-color` custom property. 70 71 The following custom properties and mixins are also available for styling: 72 73 Custom property | Description | Default 74 ----------------|-------------|---------- 75 `--paper-button-ink-color` | Background color of the ripple | `Based on the button's color` 76 `--paper-button` | Mixin applied to the button | `{}` 77 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}` 78 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}` 79 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}` 80 81 @demo demo/index.html 82 --> 83 84 <dom-module id="paper-button"> 85 <template strip-whitespace> 86 <style include="paper-material"> 87 :host { 88 @apply(--layout-inline); 89 @apply(--layout-center-center); 90 position: relative; 91 box-sizing: border-box; 92 min-width: 5.14em; 93 margin: 0 0.29em; 94 background: transparent; 95 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 96 -webkit-tap-highlight-color: transparent; 97 font: inherit; 98 text-transform: uppercase; 99 outline-width: 0; 100 border-radius: 3px; 101 -moz-user-select: none; 102 -ms-user-select: none; 103 -webkit-user-select: none; 104 user-select: none; 105 cursor: pointer; 106 z-index: 0; 107 padding: 0.7em 0.57em; 108 109 @apply(--paper-font-common-base); 110 @apply(--paper-button); 111 } 112 113 :host([raised].keyboard-focus) { 114 font-weight: bold; 115 @apply(--paper-button-raised-keyboard-focus); 116 } 117 118 :host(:not([raised]).keyboard-focus) { 119 font-weight: bold; 120 @apply(--paper-button-flat-keyboard-focus); 121 } 122 123 :host([disabled]) { 124 background: #eaeaea; 125 color: #a8a8a8; 126 cursor: auto; 127 pointer-events: none; 128 129 @apply(--paper-button-disabled); 130 } 131 132 paper-ripple { 133 color: var(--paper-button-ink-color); 134 } 135 </style> 136 137 <content></content> 138 </template> 139 140 <script> 141 Polymer({ 142 is: 'paper-button', 143 144 behaviors: [ 145 Polymer.PaperButtonBehavior 146 ], 147 148 properties: { 149 /** 150 * If true, the button should be styled with a shadow. 151 */ 152 raised: { 153 type: Boolean, 154 reflectToAttribute: true, 155 value: false, 156 observer: '_calculateElevation' 157 } 158 }, 159 160 _calculateElevation: function() { 161 if (!this.raised) { 162 this._setElevation(0); 163 } else { 164 Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this); 165 } 166 } 167 168 /** 169 Fired when the animation finishes. 170 This is useful if you want to wait until 171 the ripple animation finishes to perform some action. 172 173 @event transitionend 174 Event param: {{node: Object}} detail Contains the animated node. 175 */ 176 }); 177 </script> 178 </dom-module> 179
