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>

Polymer paper-fab：如何使其浮在纸质抽屉面板内容中

1 个答案: