• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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<!--
17Material 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
20from the point of contact. It may be flat or raised. A raised button is styled with a
21shadow.
22
23Example:
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
30A button that has `toggles` true will remain `active` after being clicked (and
31will have an `active` attribute set). For more information, see the `Polymer.IronButtonState`
32behavior.
33
34You may use custom DOM in the button body to create a variety of buttons. For example, to
35create 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
42To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button` will already
43receive focus, you may want to prevent the anchor tag from receiving focus as well by setting
44its 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
52Style 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
68By default, the ripple is the same color as the foreground at 25% opacity. You may
69customize the color using the `--paper-button-ink-color` custom property.
70
71The following custom properties and mixins are also available for styling:
72
73Custom 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