菜单

菜单在临时表面上显示一组选项。当用户与按钮、操作或其他控件交互时，它们会出现。

• 遵循：Menus - Material Design 3
• 继承自：Menu

交互式演示

用法

<span style="position: relative; display: inline-block">
  <md-button id="some-menu-btn">Menu with Anchor Set</md-button>
  <md-menu id="some-menu" for="some-menu-btn">
    <md-menu-item id="item-new-text-file">New Text File</md-menu-item>
    <md-menu-item id="item-new-file">New File...</md-menu-item>
    <md-menu-item id="item-new-window">New Window</md-menu-item>
    <md-divider></md-divider>
    <md-menu-item id="item-open-file">Open File...</md-menu-item>
    <md-menu-item id="item-open-folder">Open Folder...</md-menu-item>
    <md-divider></md-divider>
    <md-menu-item id="item-save">Save</md-menu-item>
    <md-menu-item id="item-save-as">Save As...</md-menu-item>
  </md-menu>
</span>

<label style="display: block"
  >event:
  <input type="text" readonly id="some-menu-fires" />
</label>

<script>
  const menuButton = document.getElementById('some-menu-btn');
  const menuOutput = document.getElementById('some-menu-fires');
  const menu = document.getElementById('some-menu');

  menuButton.addEventListener('click', () => {
    menu.open = !menu.open;
  });

  menu.addEventListener('select', (e) => {
    menuOutput.value = `select: { index: ${e.detail.index}, item: #${e.detail.item.id}\n}`;
  });
</script>

属性