SGH / COMPONENTS

Blame view

bower_components/paper-button/README.md 2.5 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
a1a3bc73   Luigi Serra   graphs updates 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  <!---
  
  This README is automatically generated from the comments in these files:
  paper-button.html
  
  Edit those files, and our readme bot will duplicate them over here!
  Edit this file, and the bot will squash your changes :)
  
  -->
  
  [![Build Status](https://travis-ci.org/PolymerElements/paper-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-button)
  
  _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-button)_
  
  
  ##&lt;paper-button&gt;
  
  
  Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
73bcce88   luigser   COMPONENTS 
21
22
23
24
25
26
 
  
  `paper-button` is a button. When the user touches the button, a ripple effect emanates
  from the point of contact. It may be flat or raised. A raised button is styled with a
  shadow.
  
  Example:
a1a3bc73   Luigi Serra   graphs updates 
27
28
29
 
  
      <paper-button>Flat button</paper-button>
      <paper-button raised>Raised button</paper-button>
73bcce88   luigser   COMPONENTS 
30
 
      <paper-button noink>No ripple effect</paper-button>
a1a3bc73   Luigi Serra   graphs updates 
31
32
33
34
35
 
      <paper-button toggles>Toggle-able button</paper-button>
  
  A button that has `toggles` true will remain `active` after being clicked (and
  will have an `active` attribute set). For more information, see the `Polymer.IronButtonState`
  behavior.
73bcce88   luigser   COMPONENTS 
36
a1a3bc73   Luigi Serra   graphs updates 
37
38
 
  You may use custom DOM in the button body to create a variety of buttons. For example, to
  create a button with an icon and some text:
e619a3b0   Luigi Serra   Controllet cross ... 
39
73bcce88   luigser   COMPONENTS 
40
41
42
43
 
      <paper-button>
        <iron-icon icon="favorite"></iron-icon>
        custom button content
      </paper-button>
a1a3bc73   Luigi Serra   graphs updates 
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
  
  ### Styling
  
  Style the button with CSS as you would a normal DOM element.
  
      paper-button.fancy {
        background: green;
        color: yellow;
      }
  
      paper-button.fancy:hover {
        background: lime;
      }
  
      paper-button[disabled],
      paper-button[toggles][active] {
        background: red;
      }
  
  By default, the ripple is the same color as the foreground at 25% opacity. You may
  customize the color using the `--paper-button-ink-color` custom property.
  
  The following custom properties and mixins are also available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-button-ink-color` | Background color of the ripple | `Based on the button's color`
  `--paper-button` | Mixin applied to the button | `{}`
  `--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}`
  `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}`
  `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}`