javascript - 使用 Angular Material 将FAB放在接缝上

因此，在研究Google的布局原则时，似乎他们非常重视在接缝上放置按钮（下面链接至其文档）

https://www.google.com/design/spec/layout/principles.html#principles-floating-action-button

还有一个“材料浮动动作”按钮
https://github.com/nobitagit/ng-material-floating-button

但是似乎没有人解决如何将按钮实际放置在那里的问题。
我想我可以破解一些CSS或编写一个可以执行相同操作的javascript函数，但是（对我而言）感觉应该为此提供一种方法，以确保一定程度的一致性。可能是因为我缺少一些显而易见的东西，所以我想问一下：）

最佳答案

好的，所以这可能不是世界上最平滑的解决方案，但是它可以工作，而且必须有所帮助:)

我刚刚使用“ onseam”类向md-toolbar添加了一个跨度

      <md-toolbar id="toolbar" class="md-toolbar-tools">
        <img layout="row" layout-align="center center" src="/images/logos/logo_strap_white_small.png" style="padding-bottom: 10px;"/>
        <span flex></span>
        <span class="onseam">
<md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" style=" position: relative; bottom: -25px;">
            <md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon>
          </md-button>
        <md-button class="md-raised md-fab md-primary" md-theme="default" aria-label="Home" >
          <md-icon md-svg-src="/images/icons-svg/home9.svg" class="svg-icon" style="color: rgb(255, 255, 255);"></md-icon>
        </md-button>
        </span>
      </md-toolbar>

CSS：

.onseam {
  position: relative;
  bottom: -25px;
}

尽管它可能不是最佳的解决方案，但它确实有效。