如何在Polymer 2.x应用程序抽屉布局中缩小抽屉与主要内容之间的差距？
我有一个如何在Polymer 2.x应用程序抽屉布局中缩小抽屉与主要内容之间的差距？,polymer,polymer-2.x,polymer-2.0,Polymer,Polymer 2.x,Polymer 2.0,我有一个应用程序抽屉布局元素，在其中，我希望抽屉内容（蓝色）与主内容（黄色）齐平，中间没有间隙（白色）。请注意，我将--应用程序抽屉宽度从默认值256px更改为100px。这可能是造成差距的原因。这是虫子吗？还是我编错了 注意：查看演示时，请确保输出窗格滑动得足够宽，以使抽屉可见。如果输出窗格太窄，抽屉将隐藏 应用程序抽屉布局 JS-Bin 应用程序抽屉{ --应用抽屉宽度：100px； --应用程序抽屉内容容器：{ 背景颜色：蓝色； 颜色：白色； } } #主要内容{ 背景颜色：黄色； 高
应用程序抽屉布局--应用程序抽屉宽度从默认值256px
更改为100px
。这可能是造成差距的原因。这是虫子吗？还是我编错了
注意：查看演示时，请确保输出窗格滑动得足够宽，以使抽屉可见。如果输出窗格太窄，抽屉将隐藏
应用程序抽屉布局
JS-Bin
应用程序抽屉{
--应用抽屉宽度：100px；
--应用程序抽屉内容容器：{
背景颜色：蓝色；
颜色：白色；
}
}
#主要内容{
背景颜色：黄色；
高度：100vh；
宽度：100vw；/*不会使内容部分齐平*/
}
抽屉内容
主要内容
MyEl类。元素{
静态get是（）{
返回“我的el”
}
}
定义（MyEl.is，MyEl）；
这不是一个bug。很可能，您没有阅读中的注释
注意：*如果与一起使用并指定--应用程序抽屉宽度的值
，
该值必须可由两个元素访问。这可以通过以下方式完成：
在：host
上定义包含（或html
的值（如果在
阴影根）：
：主机{--应用程序抽屉宽度：300px；}
在这种情况下，它将是：
<style>
:host {
--app-drawer-width: 100px;
}
</style>
：主持人{
--应用抽屉宽度：100px；
}
JS-Bin
：主持人{
--应用抽屉宽度：100px；
}
应用程序抽屉{
--应用程序抽屉内容容器：{
背景颜色：蓝色；
颜色：白色；
}
}
#主要内容{
背景颜色：黄色；
高度：100vh；
宽度：100vw；/*不会使内容部分齐平*/
}
抽屉内容
主要内容
MyEl类。元素{
静态get是（）{
返回“我的el”
}
}
定义（MyEl.is，MyEl）；
<style>
:host {
--app-drawer-width: 100px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="http://polygit.org/polymer+:master/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="app-layout/app-layout.html">
</head>
<body>
<dom-module id="my-el">
<template>
<style>
:host {
--app-drawer-width: 100px;
}
app-drawer {
--app-drawer-content-container: {
background-color: blue;
color: white;
}
}
#main-content {
background-color: yellow;
height: 100vh;
width: 100vw; /* doesn't make content sections flush */
}
</style>
<app-drawer-layout fullbleed>
<app-drawer slot="drawer">
drawer content
</app-drawer>
<div id="main-content">
main content
</div>
</app-drawer-layout>
</template>
<script>
class MyEl extends Polymer.Element {
static get is() {
return 'my-el'
}
}
customElements.define(MyEl.is, MyEl);
</script>
</dom-module>
<my-el></my-el>
</body>
</html>