Material and angular 2

Question

I create this menu with material:

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

This menu is the same a column with 3 items. And now i would create the same items, but in one row, not a column. How implement this?

Answer 1

If you are using flex layout from material 2, you do next:

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

Actually, you just need to put it inside flex layout row:

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