polymer-1.0 - 聚合物纸工厂：如何使其漂浮在纸抽屉面板内容中

Question

参考Polymer todo-list app，我正在尝试在 todo-view.html 中放置一个 paper-fab ，这样滚动主要内容会导致 fab 始终浮动在右下角。

我的代码看起来像这样

 <paper-drawer-panel id="paperDrawerPanel">
  <div drawer>

    <!-- Drawer Toolbar -->
    <paper-toolbar id="drawerToolbar"></paper-toolbar>

    <!-- Drawer Content -->
    <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
     ...
    </paper-menu>
  </div>
  <paper-header-panel main>

    <!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar">
      ...
    </paper-toolbar>

    <!-- Main Content -->
    <div class="content">

      <todo-list todos="{{todos}}"
                 filter-by="{{route}}"
                 on-delete-todo="deleteTodo">
      </todo-list>

      <todo-input on-add-todo="addTodo"></todo-input>
      <!-- fab does not float. -->
       <paper-fab mini icon="favorite" title="heart"></paper-fab>
    </div>
  </paper-header-panel>
</paper-drawer-panel>

即使在滚动内容时，如何使纸厂始终在右下角浮动？

Answer 1

这对我有用。添加到您的 CSS。

paper-fab {
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 70px;
      position: fixed;
      right: 25px;
      bottom: 25px;          
     }

你的标签是这样的：

  <paper-fab icon="favorite" title="heart"></paper-fab>