Question

我试图制作一个垂直图标工具栏。我希望它在正确的顶部。它只占用图标的宽度（24px和一些填充）。

我试过这个

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

垂直图标栏与角材料

1 个答案: