Angular 材质 FAB 按钮浮动位置答案

【问题标题】：Angular Material FAB Button Floating PositionAngular 材质 FAB 按钮浮动位置
【发布时间】：2016-12-12 16:44:24
【问题描述】：

我正在尝试使用 angular material 中的 FAB 按钮，但是，我无法正确定位按钮以浮动在页面上的主要内容上方，这是我的代码 sn-p：

<div layout="row" ng-cloak>
  <div layout="column">
    <div flex>
      <md-fab-speed-dial md-open="false" md-direction="down" ng-class="'md-scale'">
        <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon class="material-icons">menu</md-icon>
          </md-button>
        </md-fab-trigger>
        <md-fab-actions>
          <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Twitter">format_list_bulleted</md-icon>
          </md-button>
          <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Facebook">insert_chart</md-icon>
          </md-button>
          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Google Hangout">face</md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </div>
  </div>
  <div layout="row" style="width: 100%">
    <div flex>
      <ui-view></ui-view>
    </div>
  </div>
</div>

<ui-view> 字段属于我的主视图。这是它在我的浏览器上的外观：

我在 github 中阅读了一些关于浮动 FAB 按钮的内容，但我找不到如何实现它，也没有说它已经实现了，上次更新是 2015 年。

【问题讨论】：

标签： javascript html angularjs angularjs-material

【解决方案1】：

你为什么不这样做：

CSS：

.fab-main {
    position: fixed;
    right: 1em;
    bottom: 1em;
}

在按钮中：

<a mat-fab href="javascript:" class="fab-main">
    <mat-icon class="mat-18">add</mat-icon>
</a>

我做错了吗？它对我有用

【讨论】：

【解决方案2】：

刚弄明白了，想实现这种方案的，请参考代码sn-p：

<div layout="row" ng-cloak>
  <div layout="row" style="width: 100%;">
    <div flex>
      <div style="float: <right or left>;">
        <THIS IS WHERE MY FAB BUTTON CODE GOES>
      </div>
      <ui-view></ui-view>
    </div>
  </div>
</div>

结果是：

这是FAB按钮浮动到右侧的时候：

这是FAB按钮浮动到左侧的时候：

【讨论】：