我试图修改默认的纸质工具栏行为,即使内容显示在栏顶部。在使用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
答案 0 :(得分:4)
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做同样的事情。