紙引き出しパネルの引き出しとメインコンテンツのブロック表示

以下のコードでは、引き出しとメインツールバーを水平に並べることを想定しています。その代わりに垂直方向に整列しています！これを整理するのを手伝ってください。紙引き出しパネルの引き出しとメインコンテンツのブロック表示

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

出典

2017-01-16 whatwhy

問題がpolymerとpaper-drawer-panelため代わりRELのREFを使用しています。ポリマーは、それが他のモジュールに依存関係であるとして、まだ輸入取得されていますが、引き出しパネルは、すべての

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

出典

2017-01-16 06:14:59 a1626

OMGのおかげとしてインポートされていません！私は現在いくつかのプラグインをインストールした状態でatomを使用しています。 – whatwhy

ブラケット、アトム、またはコードのようなエディタを使用できます。後の2つはスニペットを組み込み、前者はスニペットに 'emmet'を使うことができます。 – a1626

紙引き出しパネルの引き出しとメインコンテンツのブロック表示

答えて

関連する問題