Material design status message for elements
npm install @polymer/paper-badge
corner of an element, representing a status or a notification. It will badge
the anchor element specified in the for attribute, or, if that doesn't exist,
centered to the parent node containing it.
See: Documentation,
Demo.
npm install --save @polymer/paper-badge
$3
html
Inbox
Status
for="btn"
label="favorite icon">
icon="account-box"
alt="account-box">
for="account-box"
label="mood icon">
`
$3
js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-badge/paper-badge.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/social-icons.js';class SampleElement extends PolymerElement {
static get template() {
return html
;
}
}
customElements.define('sample-element', SampleElement);
`
Example:
html
Inbox
Status
`
Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:$3
sh
git clone https://github.com/PolymerElements/paper-badge
cd paper-badge
npm install
npm install -g polymer-cli
`$3
sh
polymer serve --npm
open http://127.0.0.1:/demo/
`$3
sh
polymer test --npm
``