如何将内容添加到 paper-toolbar 以使其显示在顶部？

Question

我正在尝试修改默认的纸质工具栏行为，即将内容显示在栏的顶部。查看 chrome 开发人员工具，我发现如果我从以下位置删除高度和填充：

.toolbar-tools.paper-toolbar {
  position: relative;
  height: 64px;
  padding: 0 16px;
  pointer-events: none;
}

我的工具栏的顶部和底部部分与顶部（高度）、底部（高度）和左侧（填充）没有任何间隙：

    <paper-toolbar>
     <div class="top">
      <p>Top text</p>
     </div>
     <div class="bottom">
      <p>Bottom text</p>
     </div>
    </paper-toolbar>

我尝试将 css 规则添加到 .top 、 .bottom 和 .toolbar-tools 但这似乎没有任何效果，原始规则仍然有效。我想知道是否有任何方法可以通过以下方式删除纸张工具栏的 .top 和 .bottom 部分的边距：

    paper-toolbar {
      --paper-toolbar-background: black; 
      --paper-toolbar-color: red;
      --paper-toolbar: {
        font-size: 15px;
        height: 200px;
      }; 
    }

还是我自己创建自定义工具栏更好？

编辑：这是代码的 link https://github.com/T0MASD/webcomponents-playground/blob/master/app/elements/ui-navbar/ui-navbar.html

Answer 1

paper-toolbar 默认情况下有一个内部容器 (#topBar)，当设置为高时，还有两个 (#middleBar & #bottomBar)。

添加顶部和底部类仅当工具栏设置为高时才有效。

内部内容被flexbox移动到中间，所以要移动到顶部，将align-items样式更改为flex-start。

示例样式：

<style is="custom-style">
  paper-toolbar ::shadow #topBar {
      align-items: flex-start;
  }
</style>

#topBar 没有 mixin，所以我们必须 select 它与 ::shadow select 或者。您也可以对 #bottomBar 执行相同的操作。

Here's a working example

如何将内容添加到 paper-toolbar 以使其显示在顶部？

how to add content to the paper-toolbar so it appears right at the top?

polymer

paper-elements