1

我有一个app-drawer-layout元素，在其中，我希望抽屉内容（蓝色）与主要内容（黄色）齐平，它们之间没有间隙（白色）。请注意，我将其从默认更改--app-drawer-width为。这可能是造成差距的原因。这是一个错误吗？还是我编码错误？100px256px

这是JSBin。 注意：查看演示时，请确保输出窗格的滑动宽度足以使抽屉可见。如果输出窗格太窄，抽屉将被隐藏。

应用程序抽屉布局

在此处输入图像描述

http://jsbin.com/lulenamavo/edit?html，输出 
<!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>
        app-drawer {
          --app-drawer-width: 100px;
          --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>
4

2 回答 2

1

为清楚起见，这里是完全编码的解决方案演示。

http://jsbin.com/jodifafuqa/edit?html，输出 
<!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>
于 2017-08-07T18:17:30.127 回答
1

这不是错误。您可能错过了阅读文档中的注释。

注意：* 如果您使用 with 并为 指定一个值--app-drawer-width，则两个元素都必须可以访问该值。这可以通过定义:host包含（或者html如果在影子根之外）的值来完成：

:host { --app-drawer-width: 300px; }

在这种情况下，它将是：

<style>
  :host {
    --app-drawer-width: 100px;
  }
</style>
于 2017-08-07T08:54:07.453 回答