介绍
@polymer/paper-item 是 Polymer 3.x 中的一个可重用组件，用于创建具有单行文本和/或图像的项目。在构建 Web 应用程序时，您可能需要在工具栏、列表、下拉列表等组件中使用它。
本文将介绍如何在您的项目中使用此 npm 包。在开始之前，您必须已经安装了 Polymer 3.x 和 npm 工具。
安装
要使用 npm 包 @polymer/paper-item，请打开终端窗口并键入以下命令：
npm install --save @polymer/paper-item
使用
导入和注册
要使用 @polymer/paper-item，您必须首先导入它：
import '@polymer/paper-item/paper-item.js';
然后，在您的新自定义元素的代码中使用以下代码行将其注册到文档中：
customElements.define('my-custom-element', MyCustomElement);HTML 标记
在您的元素的模板中，使用以下 HTML 代码行添加 @polymer/paper-item：
<paper-item>My item</paper-item>
您可以向 @polymer/paper-item 添加文本或图像，如下所示：
<paper-item> <iron-icon icon="favorite"></iron-icon> My favorite </paper-item>
样式
@polymer/paper-item 附带默认样式，但您可以根据需要进行更改。
以下示例将为 @polymer/paper-item 添加红色文本颜色和 1px 的实线下划线：
-- -------------------- ---- -------
------ ------ --------------- ---- --------------------------------------
------ ------------------------------------
------ ----------------------------------------------
----- --------------- ------- -------------- -
------ --- ---------- -
------ -----
-------
---------- -
------ ----
---------------- ----------
---------------------- ------
-------------------------- ----
-
--------
------------------ -------------------
--
-
-
------------------------------------------ -----------------事件
与其他 Polymer 组件一样，@polymer/paper-item 支持同步和异步事件。
以下示例演示了如何使用 @polymer/paper-item 元素的单击事件触发器：
-- -------------------- ---- -------
------ ------ --------------- ---- --------------------------------------
------ ------------------------------------
------ ----------------------------------------------
----- --------------- ------- -------------- -
------ --- ---------- -
------ -----
-------
---------- -
------ ----
---------------- ----------
---------------------- ------
-------------------------- ----
-
--------
----------- ------------------------------ -------------------
--
-
------------------- -
------------------------
-
-
------------------------------------------ -----------------在 React 中使用
要在 React 中使用 @polymer/paper-item，请在您的组件文件中导入以下代码：
import '@polymer/paper-item/paper-item.js';
接下来，在您的组件的 return() 方法中，将以下代码放置在您想要包含 @polymer/paper-item 的位置：
<paper-item>My item</paper-item>
在 Vue 中使用
要在 Vue 中使用 @polymer/paper-item，请在您的组件文件中导入以下代码：
import '@polymer/paper-item/paper-item.js';
接下来，在您的组件的 template 中，将以下代码行放置在您想要包含 @polymer/paper-item 的位置：
<paper-item>My item</paper-item>
总结
@polymer/paper-item 是一个可重用组件，用于构建具有单行文本和/或图像的项目。要使用它，请在您的项目中安装并导入它。然后，使用自定义元素中的 HTML 代码和样式将其添加到您的 Web 应用程序中。您还可以使用同步和异步事件来监听用户活动。
希望本教程能够帮助您开始使用 @polymer/paper-item，极大提升您的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbcd1