2017-01-16 2 views
0

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

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

rendered html with toolbars aligned vertically

ответ

0

Проблема использует реф вместо отн для polymer и 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>

+0

OMG спасибо! который редактор/идеал, который вы рекомендуете использовать для того, чтобы обнаруживать ошибочные атрибуты html и т. д. В настоящее время я использую атом с установленными плагинами. – whatwhy

+0

Вы можете использовать любой редактор, например, скобки, атом или код. Позже у двух есть встроенные фрагменты, а для прежних вы можете использовать 'emmet' для фрагментов. – a1626

 Смежные вопросы

  • Нет связанных вопросов^_^