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.github.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/CONTRIBUTORS.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/PATENTS.txt 8 --> 9 10 <!-- 11 @group Paper Elements 12 13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a> 14 15 `paper-fab` is a floating action button. It contains an image placed in the center and 16 comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When 17 the user touches the button, a ripple effect emanates from the center of the button. 18 19 You may import `core-icons` to use with this element, or provide an URL to a custom icon. 20 See `core-iconset` for more information about how to use a custom icon set. 21 22 Example: 23 24 <link href="path/to/core-icons/core-icons.html" rel="import"> 25 26 <paper-fab icon="add"></paper-fab> 27 <paper-fab mini icon="favorite"></paper-fab> 28 <paper-fab src="star.png"></paper-fab> 29 30 Styling 31 ------- 32 33 Style the button with CSS as you would a normal DOM element. If you are using the icons 34 provided by `core-icons`, the icon will inherit the foreground color of the button. 35 36 /* make a blue "cloud" button */ 37 <paper-fab icon="cloud" style="color: blue;"></paper-fab> 38 39 By default, the ripple is the same color as the foreground at 25% opacity. You may 40 customize the color using this selector: 41 42 /* make #my-button use a blue ripple instead of foreground color */ 43 #my-button::shadow #ripple { 44 color: blue; 45 } 46 47 The opacity of the ripple is not customizable via CSS. 48 49 Accessibility 50 ------------- 51 52 The button is accessible by default if you use the `icon` property. By default, the 53 `aria-label` attribute will be set to the `icon` property. If you use a custom icon, 54 you should ensure that the `aria-label` attribute is set. 55 56 <paper-fab src="star.png" aria-label="star"></paper-fab> 57 58 @element paper-fab 59 @extends paper-button-base 60 @status unstable 61 --> 62 63 <link href="../polymer/polymer.html" rel="import"> 64 <link href="../core-icon/core-icon.html" rel="import"> 65 <link href="../paper-button/paper-button-base.html" rel="import"> 66 <link href="../paper-ripple/paper-ripple.html" rel="import"> 67 <link href="../paper-shadow/paper-shadow.html" rel="import"> 68 69 <polymer-element name="paper-fab" extends="paper-button-base" attributes="src icon mini" role="button"> 70 71 <template> 72 73 <style> 74 :host { 75 display: inline-block; 76 position: relative; 77 outline: none; 78 -webkit-user-select: none; 79 user-select: none; 80 cursor: pointer; 81 z-index: 0; 82 83 box-sizing: border-box; 84 width: 56px; 85 height: 56px; 86 background: #d23f31; 87 color: #fff; 88 border-radius: 50%; 89 padding: 16px; 90 } 91 92 :host([mini]) { 93 width: 40px; 94 height: 40px; 95 padding: 8px; 96 } 97 98 :host([disabled]) { 99 color: #c9c9c9; 100 pointer-events: none; 101 cursor: auto; 102 } 103 104 #ripple { 105 pointer-events: none; 106 z-index: -1; 107 } 108 109 #shadow { 110 border-radius: inherit; 111 pointer-events: none; 112 } 113 114 #icon { 115 display: block; 116 pointer-events: none; 117 } 118 </style> 119 120 <template if="{{raised}}"> 121 <paper-shadow id="shadow" fit animated></paper-shadow> 122 </template> 123 124 <!-- to position to ripple behind the icon --> 125 <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon> 126 127 </template> 128 129 <script> 130 Polymer({ 131 132 publish: { 133 134 /** 135 * The URL of an image for the icon. If the src property is specified, 136 * the icon property should not be. 137 * 138 * @attribute src 139 * @type string 140 * @default '' 141 */ 142 src: '', 143 144 /** 145 * Specifies the icon name or index in the set of icons available in 146 * the icon's icon set. If the icon property is specified, 147 * the src property should not be. 148 * 149 * @attribute icon 150 * @type string 151 * @default '' 152 */ 153 icon: '', 154 155 /** 156 * Set this to true to style this is a "mini" FAB. 157 * 158 * @attribute mini 159 * @type boolean 160 * @default false 161 */ 162 mini: false, 163 164 raised: true, 165 recenteringTouch: true, 166 fill: false 167 168 }, 169 170 iconChanged: function(oldIcon) { 171 var label = this.getAttribute('aria-label'); 172 if (!label || label === oldIcon) { 173 this.setAttribute('aria-label', this.icon); 174 } 175 } 176 177 }); 178 179 </script> 180 </polymer-element> 181
