垂直 md 工具栏答案

【问题标题】：Vertical md-toolbar垂直 md 工具栏
【发布时间】：2016-08-05 22:08:20
【问题描述】：

垂直工具栏是材质兼容的元素吗？它在 Angular Material 中可用吗？

我正在寻找一种将多个按钮与侧边栏中的图标对齐的方法。我想要md-toolbar 大小的东西，但它的行为就像md-sidebar。 md-sidebar 似乎有一个固定的宽度，对于我想固定在那里的图标来说太宽了。

有没有简单的解决方案？我尝试过使用类似于

的东西

<section layout="row">
  <!-- Sidebar (this should be thin) -->
  <md-sidenav class="md-sidenav-left" md-is-locked-open="true" md-whiteframe="4">
    <md-button><i class="material-icons">home</i></md-button>
  </md-sidenav>

  <!-- Main app area -->
  <div id="content-main"></div>

</section>

但是，对于我在其中显示的简单图标来说，侧边栏显得太厚了。

有没有办法获得垂直的md-toolbar 或更薄的md-sidebar，或者我应该重新考虑我的设计吗？

【问题讨论】：

标签： html css angularjs material-design angular-material

【解决方案1】：

使用 Angular Material 制作垂直工具栏相对容易 - CodePen

使用layout="column" 对齐图标
使用<span flex></span> 将顶部图标与底部图标分开
用 CSS 控制宽度
也许使用md-whiteframe 来添加凸起效果

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
  <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: 50px;
}

#vericalToolBar md-icon {
  color: rgba(255,255,255,0.87);
}

#toolBarTitle {
  writing-mode: tb-rl;
  color: rgba(255,255,255,0.87);
}

【讨论】：

【解决方案2】：

你看过md-fab-speed-dial吗？我想将触发器放在页面的左上角并将 md-direction 属性设置为“向下”会给您带来与您想要的结果相似的结果。

【讨论】：