材料和角度2

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

如果您正在使用Flex布局从材料2，你做下一个：

<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> 

其实，你只需将其放在柔性布局行：

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