角度のある素材の垂直アイコンバー

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> 

に角度材料ディレクティブでこれをachiveするために、任意のスマートな方法を試してみましたか？または、私は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); 
}