Question

我使用素材创建此菜单：

 <button md-icon-button [mdMenuTriggerFor]="menu" class="topPosition color-md-icon">
  <md-icon>more_vert</md-icon>
 </button>
  <md-menu #menu="mdMenu">
 <button md-menu-item>
    <md-icon>cloud</md-icon>
    <span>1</span>
  </button>
  <button md-menu-item>
    <md-icon>cloud</md-icon>
    <span>2</span>
  </button>
  <button md-menu-item>
    <md-icon>cloud</md-icon>
    <span>3</span>
  </button>
</md-menu>

如何添加一些分隔线？ <md-divider>不起作用。以及如何在我的第一个项目中添加新菜单

 <button md-menu-item>
    <md-icon>cloud</md-icon>
    <span>1</span>
  </button>

如何实现这个？

Answer 1

目前，<md-divider>是MdListModule的一部分，如果您将其导入模块定义，则可以在<md-divider>之间使用md-menu-item。像这样：

<button md-menu-item>
  <md-icon>cloud</md-icon>
  <span>1</span>
</button>
<md-divider></md-divider>
<button md-menu-item>
  <md-icon>cloud</md-icon>
  <span>2</span>
</button>

P.S。关于从<md-divider>移出MdListModule，有一个issue in GitHub。

Answer 2

我正在研究这个，它似乎不包含在material.angular.io中。您可以在此处查看功能列表：https://github.com/angular/material2。

我想你必须选择<hr>。：/

Answer 3

快速破解，在你要使用md-divider的页面中的某处添加一个空的md-list：

<md-list></md-list>

这将导致list.css加载，并允许您在md-menu中使用md-divider，例如。

Answer 4

试试这个：

<button md-icon-button [mdMenuTriggerFor]="menu" class="topPosition color-md-icon">
    <md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
    <button md-menu-item [mdMenuTriggerFor]="menu2" class="topPosition color-md-icon">
        <md-icon>cloud</md-icon>
        <span>1</span>
    </button>
    <md-divider></md-divider>
    <md-menu #menu2="mdMenu">
        <button md-menu-item>
            <md-icon>cloud</md-icon>
            <span>1</span>
        </button>
        <button md-menu-item>
            <md-icon>cloud</md-icon>
            <span>2</span>
        </button>
        <button md-menu-item>
            <md-icon>cloud</md-icon>
            <span>3</span>
        </button>
    </md-menu>
    <button md-menu-item>
        <md-icon>cloud</md-icon>
        <span>2</span>
    </button>
    <button md-menu-item>
        <md-icon>cloud</md-icon>
        <span>3</span>
    </button>
</md-menu>

新的菜单和分隔线与角2 +材料

4 个答案: