Commit 398fba3c authored by jlklein's avatar jlklein Committed by Commit bot

Rerun reproduce.sh and pick up some missing elements with git add -f.

BUG=

Review URL: https://codereview.chromium.org/1134013004

Cr-Commit-Position: refs/heads/master@{#329596}
parent 5074f1b7
{
"name": "iron-menu-behavior",
"version": "0.8.0",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"web-component",
"polymer"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "MIT",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#v0.8.0-rc.7",
"iron-selector": "PolymerElements/iron-selector#^v0.8.0"
},
"devDependencies": {
"iron-doc-viewer": "PolymerElements/iron-doc-viewer#^0.8.0",
"quick-element": "PolymerElements/quick-element#^0.8.0",
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
"web-component-tester": "Polymer/web-component-tester#^2.2.0",
"webcomponentsjs": "*"
},
"_release": "0.8.0",
"_resolution": {
"type": "version",
"tag": "0.8.0",
"commit": "e74a5c77cc51be4297728d13578e5d79b444506b"
},
"_source": "git://github.com/PolymerElements/iron-menu-behavior.git",
"_target": "^0.8.0",
"_originalSource": "PolymerElements/iron-menu-behavior"
}
\ No newline at end of file
{
"name": "iron-menu-behavior",
"version": "0.8.0",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"web-component",
"polymer"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "MIT",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#v0.8.0-rc.7",
"iron-selector": "PolymerElements/iron-selector#^v0.8.0"
},
"devDependencies": {
"iron-doc-viewer": "PolymerElements/iron-doc-viewer#^0.8.0",
"quick-element": "PolymerElements/quick-element#^0.8.0",
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
"web-component-tester": "Polymer/web-component-tester#^2.2.0",
"webcomponentsjs": "*"
}
}
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-menu-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-doc-viewer/iron-doc-viewer.html">
</head>
<body>
<iron-doc-viewer></iron-doc-viewer>
</body>
</html>
Polymer.IronMenuBehavior = Polymer.IronMultiSelectableBehavior.concat({
properties: {
/**
* Returns the currently focused item.
*
* @attribute focusedItem
* @type Object
*/
focusedItem: {
observer: '_focusedItemChanged',
readOnly: true,
type: Object
},
/**
* The attribute to use on menu items to look up the item title. Typing the first
* letter of an item when the menu is open focuses that item. If unset, `textContent`
* will be used.
*
* @attribute attrForItemTitle
* @type String
*/
attrForItemTitle: {
type: String
}
},
observers: [
'_selectedItemsChanged(selectedItems)',
'_selectedItemChanged(selectedItem)'
],
hostAttributes: {
'role': 'menu',
'tabindex': '0'
},
listeners: {
'focus': '_onFocus',
'keydown': '_onKeydown'
},
_focusedItemChanged: function(focusedItem, old) {
old && old.setAttribute('tabindex', '-1');
if (focusedItem) {
focusedItem.setAttribute('tabindex', '0');
focusedItem.focus();
}
},
_selectedItemsChanged: function(selectedItems) {
this._setFocusedItem(selectedItems[0]);
},
_selectedItemChanged: function(selectedItem) {
this._setFocusedItem(selectedItem);
},
_onFocus: function(event) {
// clear the cached focus item
this._setFocusedItem(null);
// focus the selected item when the menu receives focus, or the first item
// if no item is selected
var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
if (selectedItem) {
this._setFocusedItem(selectedItem);
} else {
this._setFocusedItem(this.items[0]);
}
},
_onKeydown: function(event) {
// FIXME want to define these somewhere, core-a11y-keys?
var DOWN = 40;
var UP = 38;
var ESC = 27;
var ENTER = 13;
if (event.keyCode === DOWN) {
// up and down arrows moves the focus
this._focusNext();
} else if (event.keyCode === UP) {
this._focusPrevious();
} else if (event.keyCode === ESC) {
// esc blurs the control
this.focusedItem.blur();
} else if (event.keyCode === ENTER) {
// enter activates the item unless it is disabled
if (!this.focusedItem.hasAttribute('disabled')) {
this._activateHandler(event);
}
} else {
// all other keys focus the menu item starting with that character
for (var i = 0, item; item = this.items[i]; i++) {
var attr = this.attrForItemTitle || 'textContent';
var title = item[attr] || item.getAttribute(attr);
if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
this._setFocusedItem(item);
break;
}
}
}
},
_focusPrevious: function() {
var length = this.items.length;
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
this._setFocusedItem(this.items[index]);
},
_focusNext: function() {
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
this._setFocusedItem(this.items[index]);
}
});
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--><html><head><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-selector/iron-multi-selectable.html">
<!--
`Polymer.IronMenuBehavior` implements accessible menu behavior.
-->
</head><body><script src="iron-menu-behavior-extracted.js"></script></body></html>
\ No newline at end of file
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
"web-component-tester": "~2.2.6" "web-component-tester": "~2.2.6"
}, },
"homepage": "https://github.com/PolymerElements/iron-meta", "homepage": "https://github.com/polymerelements/iron-meta",
"version": "0.8.2", "version": "0.8.2",
"_release": "0.8.2", "_release": "0.8.2",
"_resolution": { "_resolution": {
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
"tag": "v0.8.2", "tag": "v0.8.2",
"commit": "c67091ccb5cca75ea4d103b5ce6ae9703676aa98" "commit": "c67091ccb5cca75ea4d103b5ce6ae9703676aa98"
}, },
"_source": "git://github.com/PolymerElements/iron-meta.git", "_source": "git://github.com/polymerelements/iron-meta.git",
"_target": "^0.8.0", "_target": "^0.8.0",
"_originalSource": "PolymerElements/iron-meta" "_originalSource": "polymerelements/iron-meta"
} }
\ No newline at end of file
{
"name": "paper-icon-button",
"private": true,
"version": "0.8.0",
"main": "paper-icon-button.html",
"author": [
"The Polymer Authors"
],
"dependencies": {
"polymer": "polymer/polymer#v0.8.0-rc.7",
"iron-flex-layout": "polymerelements/iron-flex-layout#^0.8.0",
"iron-icon": "polymerelements/iron-icon#^0.8.0",
"iron-icons": "polymerelements/iron-icons#^0.8.0",
"paper-behaviors": "polymerelements/paper-behaviors#^0.8.0",
"paper-ripple": "polymerelements/paper-ripple#^0.8.0",
"paper-styles": "polymerelements/paper-styles#^0.8.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^0.8.0",
"test-fixture": "polymerelements/test-fixture#^0.8.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
"web-component-tester": "*"
},
"homepage": "https://github.com/PolymerElements/paper-icon-button",
"_release": "0.8.0",
"_resolution": {
"type": "version",
"tag": "v0.8.0",
"commit": "bd390767c4b8733b4e723307028985acd974927f"
},
"_source": "git://github.com/PolymerElements/paper-icon-button.git",
"_target": "^0.8.0",
"_originalSource": "PolymerElements/paper-icon-button"
}
\ No newline at end of file
paper-icon-button
=================
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-icon-button) for more information.
{
"name": "paper-icon-button",
"private": true,
"version": "0.8.0",
"main": "paper-icon-button.html",
"author": [
"The Polymer Authors"
],
"dependencies": {
"polymer": "polymer/polymer#v0.8.0-rc.7",
"iron-flex-layout": "polymerelements/iron-flex-layout#^0.8.0",
"iron-icon": "polymerelements/iron-icon#^0.8.0",
"iron-icons": "polymerelements/iron-icons#^0.8.0",
"paper-behaviors": "polymerelements/paper-behaviors#^0.8.0",
"paper-ripple": "polymerelements/paper-ripple#^0.8.0",
"paper-styles": "polymerelements/paper-styles#^0.8.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^0.8.0",
"test-fixture": "polymerelements/test-fixture#^0.8.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
"web-component-tester": "*"
}
}
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>
Polymer({
is: 'paper-icon-button',
behaviors: [
Polymer.PaperButtonBehavior
],
enableCustomStyleProperties: true,
properties: {
/**
* The URL of an image for the icon. If the src property is specified,
* the icon property should not be.
*/
src: {
type: String
},
/**
* Specifies the icon name or index in the set of icons available in
* the icon's icon set. If the icon property is specified,
* the src property should not be.
*/
icon: {
type: String
}
}
});
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
--><!--
@group Paper Elements
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
`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.
<paper-icon-button icon="menu"></paper-icon-button>
See [`iron-iconset`](#iron-iconset) for more information about
how to use a custom icon set.
Example:
<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 this selector:
/* make #my-button use a blue ripple instead of foreground color */
#my-button::shadow #ripple {
color: blue;
}
The opacity of the ripple is not customizable via CSS.
@element paper-icon-button
@homepage github.io
--><html><head><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<style is="x-style">
* {
--paper-icon-button-disabled-text: var(--disabled-text-color);
}
</style>
</head><body><dom-module id="paper-icon-button">
<style>
:host {
display: inline-block;
position: relative;
padding: 8px;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
mixin(--paper-icon-button);
}
:host([disabled]) {
color: var(--paper-icon-button-disabled-text);
pointer-events: none;
cursor: auto;
mixin(--paper-icon-button-disabled);
}
</style>
<template>
<paper-ripple class="circle" recenters=""></paper-ripple>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
</template>
</dom-module>
<script src="paper-icon-button-extracted.js"></script></body></html>
\ No newline at end of file
{
"name": "paper-item",
"version": "0.8.2",
"authors": [
"Yvonne Yip <ykyyip@google.com>"
],
"keywords": [
"web-components",
"web-component",
"polymer"
],
"main": "index.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-item"
},
"license": "MIT",
"homepage": "https://github.com/PolymerElements/paper-item",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#v0.8.0-rc.7",
"paper-styles": "PolymerElements/paper-styles#^0.8.0"
},
"devDependencies": {
"iron-icon": "PolymerElements/iron-icon#^0.8.0",
"iron-icons": "PolymerElements/iron-icons#^0.8.0",
"iron-doc-viewer": "PolymerElements/iron-doc-viewer#^0.8.0",
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
"web-component-tester": "Polymer/web-component-tester#^2.2.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0"
},
"_release": "0.8.2",
"_resolution": {
"type": "version",
"tag": "v0.8.2",
"commit": "0fb9b2b2fa033088a09896d721833bcd27ee164e"
},
"_source": "git://github.com/PolymerElements/paper-item.git",
"_target": "^0.8.0",
"_originalSource": "PolymerElements/paper-item"
}
\ No newline at end of file
{
"name": "iron-menu-behavior",
"version": "0.8.0",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"web-component",
"polymer"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "MIT",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#v0.8.0-rc.7",
"iron-selector": "PolymerElements/iron-selector#^v0.8.0"
},
"devDependencies": {
"iron-doc-viewer": "PolymerElements/iron-doc-viewer#^0.8.0",
"quick-element": "PolymerElements/quick-element#^0.8.0",
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
"web-component-tester": "Polymer/web-component-tester#^2.2.0",
"webcomponentsjs": "*"
},
"_release": "0.8.0",
"_resolution": {
"type": "version",
"tag": "0.8.0",
"commit": "e74a5c77cc51be4297728d13578e5d79b444506b"
},
"_source": "git://github.com/PolymerElements/iron-menu-behavior.git",
"_target": "^0.8.0",
"_originalSource": "PolymerElements/iron-menu-behavior"
}
\ No newline at end of file
# iron-menu-behavior
Accessible menu behavior
{
"name": "iron-menu-behavior",
"version": "0.8.0",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"web-component",
"polymer"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "MIT",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#v0.8.0-rc.7",
"iron-selector": "PolymerElements/iron-selector#^v0.8.0"
},
"devDependencies": {
"iron-doc-viewer": "PolymerElements/iron-doc-viewer#^0.8.0",
"quick-element": "PolymerElements/quick-element#^0.8.0",
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
"web-component-tester": "Polymer/web-component-tester#^2.2.0",
"webcomponentsjs": "*"
}
}
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-menu-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-doc-viewer/iron-doc-viewer.html">
</head>
<body>
<iron-doc-viewer></iron-doc-viewer>
</body>
</html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-selector/iron-multi-selectable.html">
<!--
`Polymer.IronMenuBehavior` implements accessible menu behavior.
-->
<script>
Polymer.IronMenuBehavior = Polymer.IronMultiSelectableBehavior.concat({
properties: {
/**
* Returns the currently focused item.
*
* @attribute focusedItem
* @type Object
*/
focusedItem: {
observer: '_focusedItemChanged',
readOnly: true,
type: Object
},
/**
* The attribute to use on menu items to look up the item title. Typing the first
* letter of an item when the menu is open focuses that item. If unset, `textContent`
* will be used.
*
* @attribute attrForItemTitle
* @type String
*/
attrForItemTitle: {
type: String
}
},
observers: [
'_selectedItemsChanged(selectedItems)',
'_selectedItemChanged(selectedItem)'
],
hostAttributes: {
'role': 'menu',
'tabindex': '0'
},
listeners: {
'focus': '_onFocus',
'keydown': '_onKeydown'
},
_focusedItemChanged: function(focusedItem, old) {
old && old.setAttribute('tabindex', '-1');
if (focusedItem) {
focusedItem.setAttribute('tabindex', '0');
focusedItem.focus();
}
},
_selectedItemsChanged: function(selectedItems) {
this._setFocusedItem(selectedItems[0]);
},
_selectedItemChanged: function(selectedItem) {
this._setFocusedItem(selectedItem);
},
_onFocus: function(event) {
// clear the cached focus item
this._setFocusedItem(null);
// focus the selected item when the menu receives focus, or the first item
// if no item is selected
var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
if (selectedItem) {
this._setFocusedItem(selectedItem);
} else {
this._setFocusedItem(this.items[0]);
}
},
_onKeydown: function(event) {
// FIXME want to define these somewhere, core-a11y-keys?
var DOWN = 40;
var UP = 38;
var ESC = 27;
var ENTER = 13;
if (event.keyCode === DOWN) {
// up and down arrows moves the focus
this._focusNext();
} else if (event.keyCode === UP) {
this._focusPrevious();
} else if (event.keyCode === ESC) {
// esc blurs the control
this.focusedItem.blur();
} else if (event.keyCode === ENTER) {
// enter activates the item unless it is disabled
if (!this.focusedItem.hasAttribute('disabled')) {
this._activateHandler(event);
}
} else {
// all other keys focus the menu item starting with that character
for (var i = 0, item; item = this.items[i]; i++) {
var attr = this.attrForItemTitle || 'textContent';
var title = item[attr] || item.getAttribute(attr);
if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
this._setFocusedItem(item);
break;
}
}
}
},
_focusPrevious: function() {
var length = this.items.length;
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
this._setFocusedItem(this.items[index]);
},
_focusNext: function() {
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
this._setFocusedItem(this.items[index]);
}
});
</script>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
"web-component-tester": "~2.2.6" "web-component-tester": "~2.2.6"
}, },
"homepage": "https://github.com/PolymerElements/iron-meta", "homepage": "https://github.com/polymerelements/iron-meta",
"version": "0.8.2", "version": "0.8.2",
"_release": "0.8.2", "_release": "0.8.2",
"_resolution": { "_resolution": {
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
"tag": "v0.8.2", "tag": "v0.8.2",
"commit": "c67091ccb5cca75ea4d103b5ce6ae9703676aa98" "commit": "c67091ccb5cca75ea4d103b5ce6ae9703676aa98"
}, },
"_source": "git://github.com/PolymerElements/iron-meta.git", "_source": "git://github.com/polymerelements/iron-meta.git",
"_target": "^0.8.0", "_target": "^0.8.0",
"_originalSource": "PolymerElements/iron-meta" "_originalSource": "polymerelements/iron-meta"
} }
\ No newline at end of file
{
"name": "paper-icon-button",
"private": true,
"version": "0.8.0",
"main": "paper-icon-button.html",
"author": [
"The Polymer Authors"
],
"dependencies": {
"polymer": "polymer/polymer#v0.8.0-rc.7",
"iron-flex-layout": "polymerelements/iron-flex-layout#^0.8.0",
"iron-icon": "polymerelements/iron-icon#^0.8.0",
"iron-icons": "polymerelements/iron-icons#^0.8.0",
"paper-behaviors": "polymerelements/paper-behaviors#^0.8.0",
"paper-ripple": "polymerelements/paper-ripple#^0.8.0",
"paper-styles": "polymerelements/paper-styles#^0.8.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^0.8.0",
"test-fixture": "polymerelements/test-fixture#^0.8.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
"web-component-tester": "*"
},
"homepage": "https://github.com/PolymerElements/paper-icon-button",
"_release": "0.8.0",
"_resolution": {
"type": "version",
"tag": "v0.8.0",
"commit": "bd390767c4b8733b4e723307028985acd974927f"
},
"_source": "git://github.com/PolymerElements/paper-icon-button.git",
"_target": "^0.8.0",
"_originalSource": "PolymerElements/paper-icon-button"
}
\ No newline at end of file
paper-icon-button
=================
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-icon-button) for more information.
{
"name": "paper-icon-button",
"private": true,
"version": "0.8.0",
"main": "paper-icon-button.html",
"author": [
"The Polymer Authors"
],
"dependencies": {
"polymer": "polymer/polymer#v0.8.0-rc.7",
"iron-flex-layout": "polymerelements/iron-flex-layout#^0.8.0",
"iron-icon": "polymerelements/iron-icon#^0.8.0",
"iron-icons": "polymerelements/iron-icons#^0.8.0",
"paper-behaviors": "polymerelements/paper-behaviors#^0.8.0",
"paper-ripple": "polymerelements/paper-ripple#^0.8.0",
"paper-styles": "polymerelements/paper-styles#^0.8.0"
},
"devDependencies": {
"iron-component-page": "polymerelements/iron-component-page#^0.8.0",
"test-fixture": "polymerelements/test-fixture#^0.8.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.6.0",
"web-component-tester": "*"
}
}
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<!--
@group Paper Elements
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
`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.
<paper-icon-button icon="menu"></paper-icon-button>
See [`iron-iconset`](#iron-iconset) for more information about
how to use a custom icon set.
Example:
<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 this selector:
/* make #my-button use a blue ripple instead of foreground color */
#my-button::shadow #ripple {
color: blue;
}
The opacity of the ripple is not customizable via CSS.
@element paper-icon-button
@homepage github.io
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<style is="x-style">
* {
--paper-icon-button-disabled-text: var(--disabled-text-color);
}
</style>
<dom-module id="paper-icon-button">
<style>
:host {
display: inline-block;
position: relative;
padding: 8px;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
mixin(--paper-icon-button);
}
:host([disabled]) {
color: var(--paper-icon-button-disabled-text);
pointer-events: none;
cursor: auto;
mixin(--paper-icon-button-disabled);
}
</style>
<template>
<paper-ripple class="circle" recenters></paper-ripple>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-icon-button',
behaviors: [
Polymer.PaperButtonBehavior
],
enableCustomStyleProperties: true,
properties: {
/**
* The URL of an image for the icon. If the src property is specified,
* the icon property should not be.
*/
src: {
type: String
},
/**
* Specifies the icon name or index in the set of icons available in
* the icon's icon set. If the icon property is specified,
* the src property should not be.
*/
icon: {
type: String
}
}
});
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment