Per Ström Per Ström - 1 month ago 22
AngularJS Question

Vertical icon bar with angular material

I'm trying to make a vertical icon toolbar. I want it to be on the right top side. It shall only occupy the width of the icon (24px and some padding).

I tried this

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


Any smart way to achive this with angular material directives? Or must I do it manually with css?

Answer

Here you go - CodePen

I did the original for this example (which was on the left hand side) for another question which I can't find for the moment. I've answered again to help yourself and others.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" layout-align="end end">
  <md-content flex 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>
  </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);
}