OLD | NEW |
(Empty) | |
| 1 |
| 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-icon-button.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [![Build Status](https://travis-ci.org/PolymerElements/paper-icon-button.svg?bra
nch=master)](https://travis-ci.org/PolymerElements/paper-icon-button) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-icon-bu
tton)_ |
| 15 |
| 16 |
| 17 ##<paper-icon-button> |
| 18 |
| 19 |
| 20 Material design: [Icon toggles](https://www.google.com/design/spec/components/bu
ttons.html#buttons-toggle-buttons) |
| 21 |
| 22 `paper-icon-button` is a button with an image placed at the center. When the use
r touches |
| 23 the button, a ripple effect emanates from the center of the button. |
| 24 |
| 25 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic
on |
| 26 from the icon set to use. |
| 27 |
| 28 <paper-icon-button icon="menu"></paper-icon-button> |
| 29 |
| 30 See [`iron-iconset`](#iron-iconset) for more information about |
| 31 how to use a custom icon set. |
| 32 |
| 33 Example: |
| 34 |
| 35 <link href="path/to/iron-icons/iron-icons.html" rel="import"> |
| 36 |
| 37 <paper-icon-button icon="favorite"></paper-icon-button> |
| 38 <paper-icon-button src="star.png"></paper-icon-button> |
| 39 |
| 40 ### Styling |
| 41 |
| 42 Style the button with CSS as you would a normal DOM element. If you are using th
e icons |
| 43 provided by `iron-icons`, they will inherit the foreground color of the button. |
| 44 |
| 45 /* make a red "favorite" button */ |
| 46 <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button> |
| 47 |
| 48 By default, the ripple is the same color as the foreground at 25% opacity. You m
ay |
| 49 customize the color using the `--paper-icon-button-ink-color` custom property. |
| 50 |
| 51 The following custom properties and mixins are available for styling: |
| 52 |
| 53 Custom property | Description | Default |
| 54 ----------------|-------------|---------- |
| 55 `--paper-icon-button-disabled-text` | The color of the disabled button | `--disa
bled-text-color` |
| 56 `--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-text-
color` |
| 57 `--paper-icon-button` | Mixin for a button | `{}` |
| 58 `--paper-icon-button-disabled` | Mixin for a disabled button | `{}` |
| 59 `--paper-icon-button-hover` | Mixin for button on hover | `{}` |
| 60 |
| 61 |
OLD | NEW |