带角材料的垂直图标栏

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); 
}