Question

对于下面的代码，我希望抽屉和主工具栏水平对齐。垂直对齐！请帮我解决这个问题。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link ref="import" href="polymer/polymer.html" />
  <link ref="import" href="paper-drawer-panel/paper-drawer-panel.html" />
  <link rel="import" href="paper-scroll-header-panel/paper-scroll-header-panel.html" />
  <link rel="import" href="paper-toolbar/paper-toolbar.html" />
  <link rel="import" href="paper-icon-button/paper-icon-button.html" />
  <link rel="import" href="iron-icons/iron-icons.html" />
  <link rel="import" href="iron-icon/iron-icon.html" />
  <link rel="import" href="paper-styles/paper-styles.html" />

</head>

<body unresolved>
  <paper-drawer-panel>

    <paper-header-panel drawer>
      <paper-toolbar>
        <span>My drawer</span>
      </paper-toolbar>
    </paper-header-panel>

    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <span>My content</span>
      </paper-toolbar>
    </paper-header-panel>

  </paper-drawer-panel>
</body>

</html>

＆＃13;

rendered html with toolbars aligned vertically

Answer 1

问题是对polymer和paper-drawer-panel使用了ref代替 rel 。聚合物仍然被导入，因为它是其他模块中的依赖项，但抽屉面板不是全部导入

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html" />
  <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html" />
  <link rel="import" href="paper-scroll-header-panel/paper-scroll-header-panel.html" />
  <link rel="import" href="paper-toolbar/paper-toolbar.html" />
  <link rel="import" href="paper-icon-button/paper-icon-button.html" />
  <link rel="import" href="iron-icons/iron-icons.html" />
  <link rel="import" href="iron-icon/iron-icon.html" />
  <link rel="import" href="paper-styles/paper-styles.html" />

</head>

<body unresolved>
  <paper-drawer-panel>

    <paper-header-panel drawer>
      <paper-toolbar>
        <span>My drawer</span>
      </paper-toolbar>
    </paper-header-panel>

    <paper-header-panel main>
      <paper-toolbar>
        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
        <span>My content</span>
      </paper-toolbar>
    </paper-header-panel>

  </paper-drawer-panel>
</body>

</html>

＆＃13;

在抽屉式面板中阻止抽屉和主要内容的显示

1 个答案: