前言
在前端开发中，我们常常需要在页面上添加各种标识，比如角标、标签等。@npm-polymer/paper-badge 就是一个常用的 npm 包，它提供了一种简单的方式来在页面上添加角标或标签。本文将详细介绍如何使用该 npm 包以及它的一些常见应用场景和示例代码。
安装
安装 @npm-polymer/paper-badge 十分简单，只需要运行以下命令即可：
npm install @npm-polymer/paper-badge
使用方法
使用 @npm-polymer/paper-badge 的方法也十分简单，只需要在 html 文件中添加以下代码即可：
<link rel="import" href="../node_modules/@npm-polymer/paper-badge/paper-badge.html">
接下来，我们就可以在 html 文件里添加 paper-badge 组件了：
<paper-badge icon="favorite"></paper-badge>
在上面的代码中，icon 属性指定角标图标。此外，label 属性还可以指定角标的文本。for 属性可以指定该角标对应的元素。上述代码会在页面上添加一个带有 heart 图标的角标。
常见应用场景
标记新内容
我们可以使用 @npm-polymer/paper-badge 来标记新的内容，如“NEW”标记。示例如下：
<paper-badge label="NEW"></paper-badge>
角标展示数量
我们可以使用 @npm-polymer/paper-badge 来展示未读消息数量等。示例如下：
<paper-badge label="9" id="badge"></paper-badge>
可以使用 JavaScript 脚本来调整原点数目：
document.getElementById('badge').setAttribute('label', '10');总结
通过本文，我们了解了如何安装和使用 @npm-polymer/paper-badge，介绍了它的常见应用场景以及相应的示例代码。希望本文可以对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb5a