Использование углового материала для нанесения FAB на шов

Question

Итак, я смотрел на принцип компоновки Google, и кажется, что они очень хороши при размещении кнопок на шве (ссылка ниже на их документацию)

https://www.google.com/design/spec/layout/principles.html

Также есть кнопка действия с плавающим материалом https://github.com/nobitagit/ng-material-floating-button

Но никто, похоже, не рассматривает, как на самом деле разместить кнопку там. Я думаю, я мог бы взломать какой-нибудь CSS или написать функцию javascript, которая бы делала то же самое, но мне кажется (мне), что должен быть метод для этого, чтобы обеспечить определенный уровень согласованности. Может быть, я что-то упускаю довольно очевидное, поэтому я подумал, что спросить:)

Answer 1

Хорошо, так что, возможно, это не самое ГЛАВНОЕ решение в мире, но оно работает, и это должно что-то значить:)

Я просто добавил на панель инструментов md диапазон с классом "onseam"

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

И хотя это может быть не лучшим решением для мира, оно работает.