帶角材料的垂直圖標欄

Question

我正在嘗試使垂直圖標工具欄。我希望它在右上方。它只能佔用圖標的寬度（24像素和一些填充）。

我想這

<div layout="column" layout-align="top end"> 
    <md-button class="md-icon-button" aria-label="close"> 
    <md-icon md-font-icon="zmdi zmdi-close"></md-icon> 
    </md-button> 
    <md-button class="md-icon-button" aria-label="Favorite"> 
    <md-icon md-font-icon="fa fa-print"></md-icon> 
    </md-button> 
    <md-button class="md-icon-button" aria-label="close"> 
    <md-icon md-font-icon="fa fa-print"></md-icon> 
    </md-button> 
</div> 

任何明智的方式角材料指令來實現這一目標？或者我必須用css手動執行它？

Answer 1

在這裏你去 - CodePen

我做原來這個例子（這是在左側），對此我無法找到暫時的另一個問題。我再次回答，以幫助自己和他人。

標記

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column"> 
    <md-content flex layout="row"> 
    <div flex> 
     Your content 
    </div> 
    <div layout="column"> 
     <md-whiteframe id="vericalToolBar" class="md-whiteframe-8dp" layout="column" layout-align="start center" flex> 
     <md-button class="md-icon-button" aria-label="More"> 
      <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon> 
     </md-button> 
     <md-button class="md-icon-button" aria-label="Favorite"> 
      <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon> 
     </md-button> 
     <p id="toolBarTitle" class="md-title">My vertical toolbar</p> 
     <span flex></span> 
     <md-button class="md-icon-button" aria-label="Favorite"> 
      <md-icon md-svg-icon="img/icons/cake.svg"></md-icon> 
     </md-button> 
     </md-whiteframe> 
    </div> 
    </md-content> 
</div> 

CSS

#vericalToolBar { 
    background-color: rgb(1,74,182); 
    width: 40px; 
} 

#vericalToolBar md-icon { 
    color: rgba(255,255,255,0.87); 
} 

#toolBarTitle { 
    writing-mode: tb-rl; 
    color: rgba(255,255,255,0.87); 
}