如何让纸质工具栏停留在底部？

Question

我正在使用聚合物纸元素。我的页面需要两个工具栏，一个在顶部，另一个在底部。另一个怎么做。

我已经 here 寻找答案。但那是一个核心工具栏，我使用的是 v1.0。仍在使用 .bottom，工具栏仍位于顶部。

谢谢

Answer 1

paper-toolbar 文档中的 .bottom 旨在对齐工具栏中的项目。如果您想让工具栏本身底部对齐，您需要设置 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>

Answer 2

我喜欢用 Flexbox 做这样的事情。这是一个带有 paper-header-panel 的例子：

<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>

请注意，这是使用 iron-flex-layout 并且您可能应该使用布局样式的混合版本，而不是像我在这里所做的那样直接使用类（即@apply(--layout- vertical), etc) 或直接使用 flexbox 样式。

如何让纸质工具栏停留在底部？

How to make a paper-toolbar stay at bottom?

html

css

polymer

paper-elements