блочный дисплей ящика и основного содержимого в панели Paper-drawer-panel

Для кода ниже я ожидаю, что ящик и основные панели инструментов будут выровнены по горизонтали. Они выровнены по вертикали! Пожалуйста, помогите мне разобраться с этим.

<!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>

визуализация html с вертикальным выравниванием панелей инструментов

1 ответ

  1. Проблема заключается в использовании ref вместо rel для polymerand paper-drawer-panel. Полимер по-прежнему импортируется, как это зависимость в других модулях, но ящик-панель не импортируется как все

    <!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>