Полимерная бумага-fab: как сделать ее поплавок внутри содержимого панели ящика для бумаги

Question

Что касается Polymer todo-list app, я пытаюсь разместить бумагу в todo-view.html, чтобы прокрутить основное содержимое в 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>