如何在 core-header-panel 中将 paper-fab 放在 core-toolbar 的接缝上，下面是内容

Question

在 core-header-panel 中，有没有一种简单的方法可以将 paper-fab 放在 core-toolbar 的接缝处，下面是内容？ core-header-panel 正在使用 waterfall-tall，因此可以更改高度。

想法是让它看起来像粉色按钮，同时让粉色按钮始终跟踪边缘。

Answer 1

如果工具栏很高，但随后由于用户向下滚动列表而缩小，我认为 fab 必须随之移动。我能找到的最好方法包含硬编码工具栏的 2 个可能高度，以及工具栏使用的过渡。

#core_toolbar {
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  font-weight: 400;
  background-color: rgb(33, 150, 243);

  #create_button {
    position: absolute;
    top: calc(64px - 28px);
    right: 24px;
    z-index: 1;
    transition: top 0.18s ease-in;
  }
}
#core_toolbar.tall {
  #create_button {
    position: absolute;
    top: calc(192px - 28px);
    right: 24px;
    z-index: 1;
    transition: top 0.18s ease-in;
  }
}

html没什么特别的：

<core-header-panel mode="waterfall-tall" id="core_header_panel">
  <core-toolbar id="core_toolbar" class="animate tall">
    <div></div>
    <paper-fab id="create_button" icon="add"></paper-fab>
  </core-toolbar>
  <section></section>
</core-header-panel>

如何在 core-header-panel 中将 paper-fab 放在 core-toolbar 的接缝上，下面是内容

How to put a paper-fab on the seam of a core-toolbar with the content below it, in a core-header-panel

css

polymer

floating-action-button