简介
@npm-polymer/paper-listbox 是一个 Polymer 元素库中的组件之一，它提供了一个可增删改查的下拉列表框。你可以使用该组件来实现类似于 Select2 或 Selectize 等 JS 组件的功能。
本文将详细介绍该组件的使用方法，包括基础使用、自定义样式、属性与事件等方面。
安装
首先需要在你的项目中安装该组件：
npm install --save @npm-polymer/paper-listbox
安装完成后，在你的项目中引入该组件即可：
<script type="module">
import '@npm-polymer/paper-listbox/paper-listbox.js';
</script>基础使用
使用 @npm-polymer/paper-listbox 组件可以轻松创建一个下拉列表框。下面是一个最简单的使用示例，它只包含了一个 paper-listbox 和几个 paper-item：
<paper-listbox>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
<paper-item>Item 4</paper-item>
</paper-listbox>此时你应该可以看到一个带有四个选项的下拉列表框。但是，由于没有设置列表框的宽度和高度，其实它是不可见的。我们需要添加样式来控制该组件的宽度和高度，以及下拉箭头的位置等。接下来我们将向您展示如何进行样式定制。
自定义样式
使用 @npm-polymer/paper-listbox 组件时，你可以使用 CSS 来改变它的样式。你可以使用展开的选择器来重写组件的 CSS 规则，也可以使用 CSS 变量来修改组件的颜色等属性。
下面是一个简单的示例，演示了如何修改列表框的宽度和添加一个边框：
-- -------------------- ---- -------
-------
------------- -
------ ------
------- --- ----- -----
-------- ----
-
--------
---------------
---------------- --------------
---------------- --------------
---------------- --------------
---------------- --------------
----------------该示例中，我们将列表框的宽度属性设置为 200 像素，将边框属性设置为灰色实线，设置了列表框的内部填充为 4 像素。
你还可以使用 --paper-listbox-background-color、--paper-listbox-color 等 CSS 变量来修改列表框的颜色。
属性
@npm-polymer/paper-listbox 组件提供了一些属性，可以用来控制其行为。下面列出了你可能需要了解的一些属性：
selected: 获取或设置组件中当前被选中的项目的索引。该属性支持两种用法：当它被传入索引值时，会使包含该索引值的选项被选中。当查询该属性时，会返回当前选中项目的索引值。multi: 指定是否支持多选。多选模式下，可以同时选择多个项目。disabled: 指定是否禁用该组件。noink: 指定是否在选项上添加 ink 特效。
下面是一个例子，演示了如何使用 selected、multi 和 disabled 属性：
-- -------------------- ---- -------
-------
------------- -
------ ------
------- --- ----- -----
-------- ----
-
--------
-------------- ------------ ----- ---------
---------------- --------------
---------------- --------------
---------------- --------------
---------------- --------------
----------------该示例中，我们将 selected 属性设置为 2，表示项目 3（从 0 开始计数）当前被选中。同时，我们还将 multi 属性设置为 true，启用了多选模式。最后，我们将 disabled 属性设置为 true，禁用了该组件，使其无法接受用户输入。
事件
@npm-polymer/paper-listbox 组件以及其内部的 paper-item 子组件都提供了一些事件，可以用来监听选择事件、焦点事件等操作。这些事件在使用该组件时非常有用。
下面是一些你可能需要了解的事件：
selected-item-changed: 当用户在列表框中选择项目时触发。iron-activate: 当用户单击 paper-item 项时触发。
下面是一个例子，演示了如何在该组件上监听 selected-item-changed 事件：
-- -------------------- ---- -------
------- --------------
------ ----------------------------------------------
----- ------- - ----------------------------------------
------------------------------------------------- ------- -- -
--------------------- ---- ------ ---------------------------
---
---------
---------------
---------------- --------------
---------------- --------------
---------------- --------------
---------------- --------------
----------------该示例中，我们首先在 JS 中获取了该组件的 DOM 元素，然后向它注册了一个selected-item-changed 事件监听器。当用户在列表框中选择项目时，监听器会输出选择项目的索引。
结论
@npm-polymer/paper-listbox 是一个功能强大的 Polymer 元素库中的组件，它提供了一些有用的功能，如选择、多选等。在本文中，我们介绍了该组件的基础使用、自定义样式、属性和事件等方面。
希望通过本文的介绍，可以帮助读者更好的理解和掌握该组件的使用方法。如果您感到有任何困难或问题，请随时在评论区留言，经验丰富的前端开发者和 Polymer 社区成员将非常乐意帮助您。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb85