css - 带 Angular Material 的垂直图标栏

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>

有什么聪明的方法可以通过 Angular Material 指令实现这一目标？或者我必须用 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);
}