Home | History | Annotate | Download | only in paper-button 
      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">Buttons</a>
     14 
     15 `paper-button` is a button. When the user touches the button, a ripple effect emanates
     16 from the point of contact. It may be flat or raised. A raised button is styled with a
     17 shadow.
     18 
     19 Example:
     20 
     21     <paper-button>flat button</paper-button>
     22     <paper-button raised>raised button</paper-button>
     23     <paper-button noink>No ripple effect</paper-button>
     24 
     25 You may use custom DOM in the button body to create a variety of buttons. For example, to
     26 create a button with an icon and some text:
     27 
     28     <paper-button>
     29       <core-icon icon="favorite"></core-icon>
     30       custom button content
     31     </paper-button>
     32 
     33 ## Styling
     34 
     35 Style the button with CSS as you would a normal DOM element.
     36 
     37     /* make #my-button green with yellow text */
     38     #my-button {
     39         background: green;
     40         color: yellow;
     41     }
     42 
     43 By default, the ripple is the same color as the foreground at 25% opacity. You may
     44 customize the color using this selector:
     45 
     46     /* make #my-button use a blue ripple instead of foreground color */
     47     #my-button::shadow #ripple {
     48       color: blue;
     49     }
     50 
     51 The opacity of the ripple is not customizable via CSS.
     52 
     53 @element paper-button
     54 @extends paper-button-base
     55 @status unstable
     56 -->
     57 
     58 <link href="../polymer/polymer.html" rel="import">
     59 <link href="../paper-shadow/paper-shadow.html" rel="import">
     60 <link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
     61 
     62 <link href="paper-button-base.html" rel="import">
     63 
     64 <polymer-element name="paper-button" extends="paper-button-base" attributes="raised recenteringTouch fill"
     65 role="button">
     66 
     67   <template>
     68 
     69     <style>
     70 
     71       :host {
     72         display: inline-block;
     73         position: relative;
     74         box-sizing: border-box;
     75         min-width: 5.14em;
     76         margin: 0 0.29em;
     77         background: transparent;
     78         text-align: center;
     79         font: inherit;
     80         text-transform: uppercase;
     81         outline: none;
     82         border-radius: 3px;
     83         -moz-user-select: none;
     84         -ms-user-select: none;
     85         -webkit-user-select: none;
     86         user-select: none;
     87         cursor: pointer;
     88         z-index: 0;
     89       }
     90 
     91       :host([disabled]) {
     92         background: #eaeaea;
     93         color: #a8a8a8;
     94         cursor: auto;
     95         pointer-events: none;
     96       }
     97 
     98       ::content * {
     99         text-transform: inherit;
    100       }
    101 
    102       #bg, #shadow {
    103         border-radius: inherit;
    104       }
    105 
    106       #ripple {
    107         pointer-events: none;
    108         z-index: -1;
    109       }
    110 
    111       .button-content {
    112         padding: 0.7em 0.57em
    113       }
    114 
    115       polyfill-next-selector { content: '.button-content > a'; }
    116       ::content > a {
    117         height: 100%;
    118         padding: 0.7em 0.57em;
    119         margin: -0.7em -0.57em;
    120         /* flex */
    121         -ms-flex: 1 1 0.000000001px;
    122         -webkit-flex: 1;
    123         flex: 1;
    124         -webkit-flex-basis: 0.000000001px;
    125         flex-basis: 0.000000001px;
    126       }
    127 
    128     </style>
    129 
    130     <template if="{{raised}}">
    131       <paper-shadow id="shadow" fit animated></paper-shadow>
    132     </template>
    133 
    134     <!-- this div is needed to position the ripple behind text content -->
    135     <div class="button-content" relative layout horizontal center-center>
    136       <content></content>
    137     </div>
    138 
    139     <core-a11y-keys keys="space enter" target="{{}}" on-keys-pressed="{{_activate}}"></core-a11y-keys>
    140 
    141   </template>
    142 
    143   <script>
    144     Polymer({
    145 
    146       publish: {
    147 
    148         /**
    149          * If true, the button will be styled with a shadow.
    150          *
    151          * @attribute raised
    152          * @type boolean
    153          * @default false
    154          */
    155         raised: false,
    156 
    157         /**
    158          * By default the ripple emanates from where the user touched the button.
    159          * Set this to true to always center the ripple.
    160          *
    161          * @attribute recenteringTouch
    162          * @type boolean
    163          * @default false
    164          */
    165         recenteringTouch: false,
    166 
    167         /**
    168          * By default the ripple expands to fill the button. Set this to true to
    169          * constrain the ripple to a circle within the button.
    170          *
    171          * @attribute fill
    172          * @type boolean
    173          * @default true
    174          */
    175         fill: true
    176 
    177       },
    178 
    179       _activate: function() {
    180         this.click();
    181         this.fire('tap');
    182         if (!this.pressed) {
    183           var bcr = this.getBoundingClientRect();
    184           var x = bcr.left + (bcr.width / 2);
    185           var y = bcr.top + (bcr.height / 2);
    186           this.downAction({x: x, y: y});
    187           var fn = function fn() {
    188             this.upAction();
    189             this.removeEventListener('keyup', fn);
    190           }.bind(this);
    191           this.addEventListener('keyup', fn);
    192         }
    193       }
    194 
    195     });
    196   </script>
    197 </polymer-element>
    198