# @anypoint-web-components/anypoint-dropdown-menu 中文文档

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

版本：0\.1\.24
npm 元数据更新时间：2026-04-07T19:31:25.669Z
中文译文更新时间：2026-11-06T10:48:15.894Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：97.8 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：6 个
- 首次发布：2019-08-06T08:01:08.288Z
- 最新版本发布：2023-06-16T16:17:41.608Z
- 近 30 天下载量：3422（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 0 个）

## 中文简介

任意点平台的可访问下拉菜单

## 安装

```sh
npm install @anypoint-web-components/anypoint-dropdown-menu
```

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

## README

# 折旧

此组件已移至 `anypoint-web-components/awc`。 。 。 .

* * *

本组件以"材料设计"菜单为主,并被调整为"任意点"平台组件.

任意点网络组件是允许在开源项目中构建任意点启用的UI的组件集.

已曝光的下放菜单显示菜单上方当前选中的菜单项目 . 它们只有在一次可以选择单一菜单项时才能被使用.

## 样式选项

该元素有三个内在主题:

-   材料设计 - 已填充
-   材料设计 - 外观
-   任意点设计 - 兼容性

默认输入生成 `filled` 放下名单.

![Filled menu](https://npmcn.com/package/%40anypoint-web-components/anypoint-dropdown-menu/demo/filled.png)

当 `outlined` 属性设置.

![Outlined menu](https://npmcn.com/package/%40anypoint-web-components/anypoint-dropdown-menu/demo/outlined.png)

当 `compatibility` 属性设置.

![Compatibility menu](https://npmcn.com/package/%40anypoint-web-components/anypoint-dropdown-menu/demo/compatibility.png)

OSS应用程序不应使用基于任意点的造型,因为它受到MuleSoft版权的保护. 此属性被保留给嵌入Anypoint平台的OSS应用程序.

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

## 使用量

### 安装

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

### 在 HTML 文件内

```html
<html>
  <head>
    <script type="module">
      import "@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js";
      import "@anypoint-web-components/anypoint-listbox/anypoint-listbox.js";
      import "@anypoint-web-components/anypoint-item/anypoint-item.js";
    </script>
  </head>
  <body>
    <anypoint-dropdown-menu
      aria-label="Select dinosaur from the list of available options"
    >
      <label slot="label">Selected dinosaur</label>
      <anypoint-listbox slot="dropdown-content" tabindex="-1">
        <anypoint-item>item 1</anypoint-item>
        <anypoint-item>item 2</anypoint-item>
        <anypoint-item>item 3</anypoint-item>
      </anypoint-listbox>
    </anypoint-dropdown-menu>
  </body>
</html>
```

### 联合国 `anypoint-listbox` 元素

使用不同元素的可能性大于 `anypoint-listbox`。替换应使用 [任意点MenuMixin](https://github.com/anypoint-web-components/anypoint-menu-mixin) 它提供了 API 供下拉元素工作.

### 数值选择

当用户在下拉菜单中选择一个选项时,列表被关闭,并给定的标签是以下之一(按顺序):

-   `label` 选定项目的属性
-   `label` 或者说 `data-label` 属性 io 选定项目
-   `innerText` 选定项目

设定的数值与 `value` 属性.

选择可以通过设置来控制 `selected` 属性/财产 `anypoint-listbox` 或执行要素 `AnypointMenuMixin`。 。 。 .

```html
<anypoint-dropdown-menu
  aria-label="Select dinosaur from the list of available options"
>
  <label slot="label">Selected dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1" selected="0">
    <anypoint-item label="My item 1">item 1</anypoint-item>
    <anypoint-item label="My item 2">item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>
```

默认情况下,选定值设定为 `My item 1`当选择选项3时,标签值变为 `item 3`。 。 。 .

### 辅助文本

辅助文本可以让用户更好地了解需要什么样的输入. 无效时可以是信息消息或无效消息 已检测到输入 .

#### 信息消息

信息信息为用户提供了额外的字段描述. 当标签可能混淆或确保用户了解收集输入的原因时,应当使用.

```html
<anypoint-dropdown-menu infomessage="Will be added to your order.">
  <label slot="label">Select a dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>
```

![Info message](https://npmcn.com/package/%40anypoint-web-components/anypoint-dropdown-menu/demo/info-message.png)

不要试图提供过于详细的信息。 用户应当能够以一秒之差扫描消息. 将其作为标签的附加文本.

#### 无效的消息

出错消息应当帮助用户从出错状态中恢复. 使用清晰的信息, 并简单说明如何解决问题, 例如 `Only letters are allowed`。 。 。 .

```html
<anypoint-dropdown-menu
  invalidmessage="This value is required"
  invalid
  required
>
  <label slot="label">Select a dinosaur</label>
  <anypoint-listbox slot="dropdown-content" tabindex="-1">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>
```

![Invalid message](https://npmcn.com/package/%40anypoint-web-components/anypoint-dropdown-menu/demo/invalid-message.png)

### 形式相关自定义要素

这个 [窗体关联自定义元素](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?pli=1#) 允许将自定义元素与 `<form>` 键。 原始自定义元素 spec 不允许这样做 . 某些浏览器可能不支持与窗体相关的自定义元素,因此可能需要使用自定义形式元素(例如: [铁制](https://www.webcomponents.org/element/@polymer/iron-form)) (中文(简体) ).

该元素支持在浏览器中执行此API的API. 这意味着元素的行为就像 `<select>` 元素插入窗体元素时。 例如,请见演示页.

### 验证

构成部分支助 `required` 财务报告和审定财务报表 `autoValidate` 属性。 当元素是 `required` 然后它使状态无效,当 `validate()` 或者说 `checkValidity()` 函数调用. 这个 `validate()` 函数由 [验证混合剂](https://github.com/anypoint-web-components/validatable-mixin) 用于自定义元素. `checkValidity()` 函数调用 `validate()` 函数,如果有的话,内部 `checkValidity()` 函数由窗体关联自定义元素 API提供.

这个 `autoValidate` 选项允许在值变化时自动调用验证函数。 它可以在自定义验证器执行时使用 [验证器Mixin](https://github.com/anypoint-web-components/validator-mixin)。 。 。 .

```html
<anypoint-dropdown-menu required autovalidate>
  <label slot="label">Selected dinosaur</label>
  <anypoint-listbox slot="dropdown-content">
    <anypoint-item>item 1</anypoint-item>
    <anypoint-item>item 2</anypoint-item>
    <anypoint-item>item 3</anypoint-item>
  </anypoint-listbox>
</anypoint-dropdown-menu>
```

## 无障碍

元素与 `anypoint-listbox` 共同创建一个可访问选项列表。 列表框可以被支持类似功能的其他任何元素所取而代之,但要确保它有合适的aria支持.

## 发展

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

### 本地运行演示

```sh
npm start
```

### 运行测试

```sh
npm test
```

## 常见问题

### @anypoint-web-components/anypoint-dropdown-menu 是什么？

任意点平台的可访问下拉菜单

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

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

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

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

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

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

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

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

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

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

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

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