# @anypoint-web-components/anypoint-listbox 中文文档

规范地址：https://npmcn.com/package/%40anypoint-web-components/anypoint-listbox/

版本：1\.1\.7
npm 元数据更新时间：2026-04-07T19:25:20.575Z
中文译文更新时间：2026-11-06T12:05:56.026Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40anypoint-web-components/anypoint-listbox
原文对照：https://npmcn.com/package/%40anypoint-web-components/anypoint-listbox/?lang=original
项目主页：https://github.com/anypoint-web-components/anypoint-listbox#readme
源码仓库：https://github.com/anypoint-web-components/anypoint-listbox

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：62.7 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2019-08-04T08:20:00.122Z
- 最新版本发布：2021-05-30T22:50:15.485Z
- 近 30 天下载量：3285（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 0 个）

## 中文简介

任意点样式选项列表

## 安装

```sh
npm install @anypoint-web-components/anypoint-listbox
```

也可以使用：`pnpm add @anypoint-web-components/anypoint-listbox`、`yarn add @anypoint-web-components/anypoint-listbox`、`bun add @anypoint-web-components/anypoint-listbox`

## README

# 任意点列表框

[![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/anypoint-listbox.svg)](https://www.npmjs.com/package/@anypoint-web-components/anypoint-listbox)

[![tests](https://github.com/anypoint-web-components/anypoint-listbox/actions/workflows/deployment.yml/badge.svg)](https://github.com/anypoint-web-components/anypoint-listbox/actions/workflows/deployment.yml)

这个 `anypoint-listbox` 执行 Anypoint 平台的可访问选项列表.

```html
<anypoint-listbox>
  <anypoint-item>Item 1</anypoint-item>
  <anypoint-item>Item 2</anypoint-item>
  <anypoint-item>Item 3</anypoint-item>
</anypoint-listbox>
```

可以通过使用 `selected` 属性/ 属性 :

```html
<anypoint-listbox selected="1">
  <anypoint-item>Item 1</anypoint-item>
  <anypoint-item>Item 2</anypoint-item>
  <anypoint-item>Item 3</anypoint-item>
</anypoint-listbox>
```

它可以通过使用 `multi` 属性/ 属性 :

```html
<anypoint-listbox multi>
  <anypoint-item>Item 1</anypoint-item>
  <anypoint-item>Item 2</anypoint-item>
  <anypoint-item>Item 3</anypoint-item>
</anypoint-listbox>
```

儿童可以通过任何属性而不是指数来选择:

```html
<anypoint-listbox attrforselected="value" selected="2">
  <anypoint-item value="1">Item 1</anypoint-item>
  <anypoint-item value="2">Item 2</anypoint-item>
  <anypoint-item value="3">Item 3</anypoint-item>
</anypoint-listbox>
```

您可以通过监听来观察变化 `selected-changed` 事件或设置 `onselected` 属性 :

```javascript
list.onselected = (e) => {
  console.log(e.target.selected);
};
// or
list.addEventListener('selected-changed', (e) => {
  console.log(e.target.selected);
  // also e.detail.value
});
```

## 无障碍

`<anypoint-listbox>` 已经 `role="listbox"` 默认。 多选择列表框也会有 `aria-multiselectable` 设置. 它执行密钥绑定,通过列表框以上下箭头键导航,esc以退出列表框,并输入以激活列表框项目. 打入列表框项目的第一个字母也会将其聚焦.

该单位还提供支助 `aria-selected` 儿童在 `useAriaSelected` 属性设置。 当实施工作在下述情况下发挥不同的作用时,应使用该工具: `aria-selected` 需要时间.

```html
<anypoint-listbox role="tablist" useAriaSelected>
  <button role="tab">Tab #1</button>
  <button role="tab">Tab #2</button>
  <button role="tab">Tab #3</button>
</anypoint-listbox>
```

## 使用量

### 安装

```sh
npm install --save @anypoint-web-components/anypoint-listbox
```

### 在 LitElement 模板中

```javascript
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
import '@anypoint-web-components/anypoint-item/anypoint-item.js';

class SimpleElement extends LitElement {
  render() {
    const { options, selected } = this;
    return html`
    <anypoint-listbox .selected="${selected}" @selected-changed="${this._selectedHandler}">
    ${options.map((item) => html`<anypoint-item>${item}</anypoint-item>`)}
    </anypoint-listbox>
    `;
  }

  _selectedHandler(e) {
    this.selected = e.target.value;
  }
}
window.customElements.define('simple-element', SimpleElement);
```

### 发展

```sh
git clone https://github.com/anypoint-web-components/anypoint-listbox
cd anypoint-listbox
npm install
```

### 本地运行演示

```sh
npm start
```

### 运行测试

```sh
npm test
```

## 常见问题

### @anypoint-web-components/anypoint-listbox 是什么？

任意点样式选项列表

### 如何安装 @anypoint-web-components/anypoint-listbox？

在项目目录运行 npm install @anypoint-web-components/anypoint-listbox，或使用 pnpm add / yarn add / bun add。

### @anypoint-web-components/anypoint-listbox 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/anypoint-web-components\_\_anypoint-listbox 是否存在。

### @anypoint-web-components/anypoint-listbox 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @anypoint-web-components/anypoint-listbox 可以商用吗？

@anypoint-web-components/anypoint-listbox 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @anypoint-web-components/anypoint-listbox 的下载量有多少？

根据 npm 官方下载统计，@anypoint-web-components/anypoint-listbox 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,285 次，日均约 110 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @anypoint-web-components/anypoint-listbox 还在维护吗？

最新版本 1\.1\.7 发布于 2021/05/31（5 年前）；至今共发布 13 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/08/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。