# @digital-realty/ix-menu 中文文档

规范地址：https://npmcn.com/package/%40digital-realty/ix-menu/

版本：1\.3\.7
npm 元数据更新时间：2026-11-03T17:28:33.140Z
中文译文更新时间：2026-11-12T08:34:23.263Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40digital-realty/ix-menu
原文对照：https://npmcn.com/package/%40digital-realty/ix-menu/?lang=original

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

- 包体积（解压后）：44.6 kB，43 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- 首次发布：2023-10-20T13:27:33.286Z
- 最新版本发布：2026-11-03T17:28:32.965Z
- 近 30 天下载量：3231（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：68（近 12 个月 32 个）

## 中文简介

根据开放式Wc建议编写的网络组件ix菜单

## 安装

```sh
npm install @digital-realty/ix-menu
```

也可以使用：`pnpm add @digital-realty/ix-menu`、`yarn add @digital-realty/ix-menu`、`bun add @digital-realty/ix-menu`

## README

# <ix-菜单>

此网络组件遵循 [打开wc](https://github.com/open-wc/open-wc) 建议.

## 安装

```bash
npm i @digital-realty/ix-menu
```

## 使用量

```html
<script type="module">
  import '@digital-realty/ix-menu/ix-menu.js';
  import '@digital-realty/ix-menu/ix-menu-item.js';
  import '@digital-realty/ix-menu/ix-sub-menu.js';
</script>
<span style="position: relative">
  <button id="anchor">Menu anchor</button>
  <ix-menu id="menu" anchor="anchor" has-overflow>
    <ix-menu-item>
      <div slot="headline">Apple</div>
    </ix-menu-item>
    <ix-menu-item>
      <div slot="headline">Banana</div>
    </ix-menu-item>
    <ix-sub-menu 
      menu-corner="end-end"
      anchor-corner="end-start">
      <ix-menu-item slot="item">
        <div slot="headline">Fruits A</div>
      </ix-menu-item>
      <!-- Submenu must be slotted into sub-menu's menu slot -->
      <ix-menu slot="menu">
        <ix-menu-item>
          <div slot="headline">Apricot</div>
        </ix-menu-item>
        <ix-menu-item>
          <div slot="headline">Avocado</div>
        </ix-menu-item>
      </ix-menu>
    </ix-sub-menu>
  </ix-menu>
</span>
<script>
    const anchorEl = document.body.querySelector('#anchor');
    const menuEl = document.body.querySelector('#menu');
    anchorEl.addEventListener('click', () => { menuEl.open = !menuEl.open; });
</script>
```

### 使用菜单锚包

```html
<script type="module">
  import '@digital-realty/ix-menu/ix-menu-anchor.js';
  import '@digital-realty/ix-menu/ix-menu.js';
  import '@digital-realty/ix-menu/ix-menu-item.js';
  import '@digital-realty/ix-menu/ix-sub-menu.js';
</script>
<ix-menu-anchor>
  <button slot="anchor">The menu item</button>
  <ix-menu-item>
    <div slot="headline">Apple</div>
  </ix-menu-item>
  <ix-menu-item>
    <div slot="headline">Banana</div>
  </ix-menu-item>
  <ix-sub-menu 
    menu-corner="end-end"
    anchor-corner="end-start">
    <ix-menu-item slot="item">
      <div slot="headline">Fruits A</div>
    </ix-menu-item>
    <!-- Submenu must be slotted into sub-menu's menu slot -->
    <ix-menu slot="menu">
      <ix-menu-item>
        <div slot="headline">Apricot</div>
      </ix-menu-item>
      <ix-menu-item>
        <div slot="headline">Avocado</div>
      </ix-menu-item>
    </ix-menu>
  </ix-sub-menu>
</ix-menu-anchor> 
```

### 在反应中

```html
<script type="module">
  import { IxMenu } from '@digital-realty/ix-menu/IxMenu';
  import { IxMenuIem } from '@digital-realty/ix-menu/IxMenuItem';
  import { IxSubMenu } from '@digital-realty/ix-menu/IxSubMenu';
<script>
```

## 演示文稿和文件

完整文档和演示 [DLR 组件图片库](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-menu--default)。 。 。 .

## 常见问题

### @digital-realty/ix-menu 是什么？

根据开放式Wc建议编写的网络组件ix菜单

### 如何安装 @digital-realty/ix-menu？

在项目目录运行 npm install @digital-realty/ix-menu，或使用 pnpm add / yarn add / bun add。

### @digital-realty/ix-menu 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @digital-realty/ix-menu 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @digital-realty/ix-menu 可以商用吗？

@digital-realty/ix-menu 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @digital-realty/ix-menu 的下载量有多少？

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

### @digital-realty/ix-menu 还在维护吗？

最新版本 1\.3\.7 发布于 2026/11/04（8 天前）；至今共发布 68 个版本，其中过去 12 个月发布了 32 个；首次发布于 2023/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。