简介
@polymer/paper-listbox 是一个基于 Polymer 2.0 的组件库，提供了一个带有选择器的列表框。它具有可定制的风格和交互方式，易于集成到现有项目中。
这篇文章将详细介绍如何使用 @polymer/paper-listbox，帮助读者快速了解其API和用法。
安装
要使用 @polymer/paper-listbox，需要在项目中安装 polymer-element 和 polymer-cli，可以使用以下命令进行安装：
npm install polymer-cli -g npm init polymer-2 cd <project-name> npm install --save @polymer/paper-listbox
基本用法
引入组件
要使用 @polymer/paper-listbox，需要在 HTML 文件中引入组件。
-- -------------------- ---- -------
--------- -----
------
------
------- ------------- ------------------------------------------------------------------------------------
------- -----------------
-
---------- -
------ --------------------------------
----------- ------------------------------------------
------------------- ----------------------------------------------------
------------------------- -------------------------------------------------------
-
-
---------
-------
------
---------------
---------------- --------------
---------------- --------------
---------------- --------------
----------------
-------
-------用法
创建一个 paper-listbox，包含多个 paper-item，组件将自动添加选择器和样式。可以使用 CSS 对组件进行样式定制。
<paper-listbox> <paper-item>Item 1</paper-item> <paper-item>Item 2</paper-item> <paper-item>Item 3</paper-item> </paper-listbox>
paper-listbox 继承自 Polymer 2.0 的 lit-element，因此可以使用例如 @properties、@customElement、@css 和 @query 等装饰器。
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
------ - -------------- --------- ----- - ---- --------------
------ - ------------ - ---- -------------------------
----------------------------
------ ----- --------- ------- ---------- -
----------------------- --------
---------------- --------- ----- - ------
---------------- ------- ----- - ------ --- ----- --- ----- ----
-------- -
------ -----
-------
----- -
-------- ------
-
--------
-------------- ------------------------- ------------------- --------------------- -----------------------------------------------------
--------------------- -- ---------------- ---------------------------------------
----------------
--
-
----------------------- -
--------------------- -------- ----------------
-
-API
paper-listbox 提供了以下 API：
- selected: 获取或设置当前选定的项。类型为数组，包含当前选定项的值。
- attrForSelected: 获取或设置用于标识选定项的属性名称，默认为“data-value”。
- multi: 获取或设置是否允许多个项被选中。
- selectedValues: 获取或设置当前选定的值。类型为数组，包含当前选定值的字符串值。
- selectedItems: 获取当前选定的 paper-item 的引用。类型为数组，包含当前选定项的列表。
指南
本文介绍了如何安装、使用、自定义 @polymer/paper-listbox 组件，帮助读者快速上手使用组件。
如果想要更深入了解 Paper Listbox 的用法和定制，可以参考官方文档。
示例代码
完整的示例代码可以在以下仓库中找到：
https://github.com/Polymer/paper-listbox
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7580cba9b7065299ccbcd2