javascript - 使用 Angular Material 将 FAB 放在 seam 上

Question

谷歌的布局原则也是如此，他们似乎很擅长将按钮放在接缝上(下面链接到他们的文档)

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

还有一个 Material Floating Action 按钮 https://github.com/nobitagit/ng-material-floating-button

但似乎都没有解决如何实际将按钮放在那里的问题。 我想我可以破解一些 CSS 或编写一个 javascript 函数来做同样的事情，但感觉(对我来说)应该有一个方法来确保一定程度的一致性。可能是我遗漏了一些相当明显的东西，所以我想我会问:)

Answer 1

好的，所以这可能不是世界上最流畅的解决方案，但它确实有效，而且必须有所作为 :)

我刚刚用类“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;
}

虽然它可能不是世界上最好的解决方案，但它确实有效。