Question

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

我看了here的答案。但这是一个核心工具栏，我使用的是v1.0。仍在使用void playSound(String songName) { // codes that play song goes here } When ListItem is clicked, do switch List.setOnItemClickListener(new OnItemClickListener() @Override public void onitemClick() { switch(position) { case 0: playSound("SoundName") break; } } );，工具栏仍位于顶部。

由于

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>

请注意，这是使用iron-flex-layout＆amp;您应该使用mixin版本的布局样式而不是直接使用我在这里完成的类（即@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>

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

2 个答案: