材料和角度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>