polymer - 如何将内容添加到 paper 工具栏，使其显示在顶部？

Question

我正在尝试修改默认的 paper 工具栏行为，即使内容显示在工具栏的顶部。浏览 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 但这似乎没有任何效果原来的规则仍然有效。我想知道是否有任何方法可以通过以下方式删除 paper 工具栏的 .top 和 .bottom 部分的边距:

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

或者我自己创建自定义工具栏会更好吗？

编辑: 这是代码的链接 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，因此我们必须使用::shadow 选择器选择它。您也可以对 #bottomBar 执行相同的操作。

Here's a working example