Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
@polymer/paper-badge
Advanced tools
<paper-badge>
is a circular text badge that is displayed on the top right
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
<html>
<head>
<script type="module">
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';
</script>
</head>
<body>
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
<div>
<paper-button id="btn">Status</paper-button>
<paper-badge
icon="favorite"
for="btn"
label="favorite icon">
</paper-badge>
</div>
<div>
<paper-icon-button
id="account-box"
icon="account-box"
alt="account-box">
</paper-icon-button>
<paper-badge
icon="social:mood"
for="account-box"
label="mood icon">
</paper-badge>
</div>
</body>
</html>
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`
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
<div>
<paper-button id="btn">Status</paper-button>
<paper-badge
icon="favorite"
for="btn"
label="favorite icon">
</paper-badge>
</div>
<div>
<paper-icon-button
id="account-box"
icon="account-box"
alt="account-box">
</paper-icon-button>
<paper-badge
icon="social:mood"
for="account-box"
label="mood icon">
</paper-badge>
</div>
`;
}
}
customElements.define('sample-element', SampleElement);
Example:
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
<div>
<paper-button id="btn">Status</paper-button>
<paper-badge icon="favorite" for="btn" label="favorite icon"></paper-badge>
</div>
<div>
<paper-icon-button id="account-box" icon="account-box" alt="account-box"></paper-icon-button>
<paper-badge icon="social:mood" for="account-box" label="mood icon"></paper-badge>
</div>
If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/paper-badge
cd paper-badge
npm install
npm install -g polymer-cli
polymer serve --npm
open http://127.0.0.1:<port>/demo/
polymer test --npm
FAQs
Material design status message for elements
The npm package @polymer/paper-badge receives a total of 2,250 weekly downloads. As such, @polymer/paper-badge popularity was classified as popular.
We found that @polymer/paper-badge demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.