Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(91)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-icon-button/README.md

Issue 1561893002: [Polymer] Roll polymer to latest version (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: update grdp Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 paper-icon-button
2 =================
3 1
4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Buttons</a> 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 ##&lt;paper-icon-button&gt;
18
19
20 Material design: [Icon toggles](https://www.google.com/design/spec/components/bu ttons.html#buttons-toggle-buttons)
5 21
6 `paper-icon-button` is a button with an image placed at the center. When the use r touches 22 `paper-icon-button` is a button with an image placed at the center. When the use r touches
7 the button, a ripple effect emanates from the center of the button. 23 the button, a ripple effect emanates from the center of the button.
8 24
9 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on 25 `paper-icon-button` includes a default icon set. Use `icon` to specify which ic on
10 from the icon set to use. 26 from the icon set to use.
11 27
12 ```html 28 <paper-icon-button icon="menu"></paper-icon-button>
13 <paper-icon-button icon="menu"></paper-icon-button>
14 ```
15 29
16 See [`iron-iconset`](#iron-iconset) for more information about 30 See [`iron-iconset`](#iron-iconset) for more information about
17 how to use a custom icon set. 31 how to use a custom icon set.
18 32
19 Example: 33 Example:
20 34
21 ```html 35 <link href="path/to/iron-icons/iron-icons.html" rel="import">
22 <link href="path/to/iron-icons/iron-icons.html" rel="import">
23 36
24 <paper-icon-button icon="favorite"></paper-icon-button> 37 <paper-icon-button icon="favorite"></paper-icon-button>
25 <paper-icon-button src="star.png"></paper-icon-button> 38 <paper-icon-button src="star.png"></paper-icon-button>
26 ``` 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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698