0

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>

コンテンツをスクロールしている間でも、ペーパーファブを常に右下にフロートさせるにはどうすればよいですか?

4

1 に答える 1

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>
于 2016-06-12T22:55:45.693 に答える