Как сделать бумажную панель внизу?

Question

Я использую полимерные элементы бумаги. Мне нужны две панели инструментов для моей страницы, одна сверху и другая внизу. Как сделать другой.

Я посмотрел here для ответа. Но это основная панель инструментов, и я использую v1.0. При использовании .bottom панель инструментов остается сверху.

Благодаря

Answer 1

Мне нравится использовать Flexbox для подобных вещей. Вот пример с папье-заголовка панели:

<paper-header-panel> 
    <paper-toolbar><span>Top Toolbar</span></paper-toolbar> 
    <div class="layout vertical fit"> 
    <div class="layout flex">content</div> 
    <paper-toolbar><span>Bottom Toolbar</span></paper-toolbar> 
    </div> 
</paper-header-panel> 

Обратите внимание, что это с помощью железо-Flex-макет & вы, вероятно, следует использовать версию Смешение стилей компоновки вместо классов непосредственно, как это сделал я (т.е. @apply (- layout-vertical) и т. д.) или напрямую использовать стили Flexbox.

Answer 2

.bottom в документации paper-toolbar предназначена для выравнивания элементов внутри панели. Если вы хотите, чтобы панель инструментов была выровнена по низу, вам нужно будет стилизовать элемент paper-toolbar и его контейнер.

Стили:

<style> 
    .container { 
    position: relative; 
    } 
    paper-toolbar.bottom { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
</style> 

HTML:

<div class="container"> 
    <paper-toolbar></paper-toolbar> 
    <paper-toolbar class="bottom"></paper-toolbar> 
</div>