Blame view

bower_components/paper-icon-button/README.md 2.17 KB
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-icon-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-icon-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-icon-button)
  
  _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-icon-button)_
  
  
  ##&lt;paper-icon-button&gt;
  
  
  Material design: [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
73bcce88   luigser   COMPONENTS
21
22
23
24
25
26
27
  
  `paper-icon-button` is a button with an image placed at the center. When the user touches
  the button, a ripple effect emanates from the center of the button.
  
  `paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
  from the icon set to use.
  
a1a3bc73   Luigi Serra   graphs updates
28
      <paper-icon-button icon="menu"></paper-icon-button>
73bcce88   luigser   COMPONENTS
29
30
31
32
33
34
  
  See [`iron-iconset`](#iron-iconset) for more information about
  how to use a custom icon set.
  
  Example:
  
a1a3bc73   Luigi Serra   graphs updates
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
      <link href="path/to/iron-icons/iron-icons.html" rel="import">
  
      <paper-icon-button icon="favorite"></paper-icon-button>
      <paper-icon-button src="star.png"></paper-icon-button>
  
  ### Styling
  
  Style the button with CSS as you would a normal DOM element. If you are using the icons
  provided by `iron-icons`, they will inherit the foreground color of the button.
  
      /* make a red "favorite" button */
      <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
  
  By default, the ripple is the same color as the foreground at 25% opacity. You may
  customize the color using the `--paper-icon-button-ink-color` custom property.
  
  The following custom properties and mixins are available for styling:
  
  Custom property | Description | Default
  ----------------|-------------|----------
  `--paper-icon-button-disabled-text` | The color of the disabled button | `--disabled-text-color`
  `--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-color`
  `--paper-icon-button` | Mixin for a button | `{}`
  `--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
  `--paper-icon-button-hover` | Mixin for button on hover | `{}`
73bcce88   luigser   COMPONENTS