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 `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>