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

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

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

Answer 1

paper-toolbar默认情况下有一个内部容器（#topBar），另外还有两个（#middleBar＆amp; #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

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

1 个答案: