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>

此菜单与包含3个项目的列相同。现在我会创建相同的项目，但是在一行中，而不是列。怎么实现这个？

Answer 1

如果您使用材质2中的flex布局，则执行下一步：

<button md-icon-button [mdMenuTriggerFor]="menu" class="topPosition color-md-icon">
    <md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
  <div fxLayout="row">
    <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>
  </div>
</md-menu>

实际上，您只需将其放在flex布局行中：

<div fxLayout="row">
   ....buttons....
</div>

材料和角度2

1 个答案: