2017-04-05 9 views
0

ポリマーフレームワークが初めてです。私はポリマー2.0.0-rc.3と最新のクロムを使用しています。しかし、以下のコードはメニューを表示していません。ブラウザーには "Hello World"だけが表示されます。デベロッパーツールコンソールにエラーは表示されません。以下ポリマーでクロムにメニューが表示されない2.0

コード

bower.json

テストapp.html

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="../bower_components/paper-item/paper-item.html"> 

<!-- Since 'home' is the default route, eagerly load it. --> 
<!-- <link rel="import" href="shop-home.html"> --> 

<dom-module id="test-app"> 
    <template> 
    <H1>Hello World</H1> 
    <paper-toolbar> 
     <div class="horizontal-section"> 
     <paper-menu> 
      <paper-item>Inbox</paper-item> 
      <paper-item>Starred</paper-item> 
      <paper-item>Sent mail</paper-item> 
      <paper-item>Drafts</paper-item> 
     </paper-menu> 
     </div> 
    </paper-toolbar> 
    </template> 
    <script> 
    class testApp extends Polymer.Element { 
     static get is() { return 'test-app'; } 
     } 

    customElements.define(testApp.is, testApp); 
    </script> 
</dom-module> 

index.htmlを

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 
    <title>test</title> 
    <link rel="import" href="src/test-app.html" async> 
</head> 
<body> 
    <test-app unresolved>test</test-app> 

    <script> 
    window.performance && performance.mark && performance.mark('index.html'); 

    Polymer = {lazyRegister: true, dom: 'shadow'}; 

    (function() { 
     if ('registerElement' in document 
      && 'import' in document.createElement('link') 
      && 'content' in document.createElement('template')) { 
     // platform is good! 
     } else { 
     // polyfill the platform! 
     var e = document.createElement('script'); 
     e.src = 'bower_components/webcomponentsjs/webcomponents-lite.js'; 
     document.body.appendChild(e); 
     } 
    })(); 
    </script> 

</body> 
</html> 

あります0

"polymer": "polymer/polymer#^2.0.0-rc.3", "app-layout": "polymerelements/app-layout#^0.10.7", "app-route": "polymerelements/app-route#^0.9.3", "iron-flex-layout": "polymerelements/iron-flex-layout#^1.3.2", "iron-form": "polymerelements/iron-form#^1.1.4", "iron-icon": "polymerelements/iron-icon#^1.0.12", "iron-pages": "polymerelements/iron-pages#^1.0.8", "iron-selector": "polymerelements/iron-selector#^1.5.2", "paper-icon-button": "polymerelements/paper-icon-button#^1.1.4", "paper-spinner": "polymerelements/paper-spinner#^1.2.1", "iron-media-query": "polymerelements/iron-media-query#^1.0.8", "paper-menu": "polymerelements/paper-menu#^1.2.2", "paper-item": "polymerelements/paper-item#^1.2.1", "paper-toolbar": "polymerelements/paper-toolbar#^1.1.7" 

本文は誤りについて考えていますか?どのガイドをどのようにエラーを見つけるためにそれをデバッグできますか?

+0

ほとんどの要素には「2.0プレビュー」と呼ばれる余分な枝があります。それらを使用する必要があります。「ポリメレメント/鉄フォーム## 2.0プレビュー」のように追加してください。ポリマー2と互換性があります – daKmoR

+0

残念ながら、用紙メニューの2.0プレビューブランチはありません。ブートストラップメニューのようにポリマー2.0にメニュー項目を含むメニューを作成する他の方法はありますか? – Moazzam

+0

paper-menuは現在互換性がないようです...いくつかは正常に移植されたようです https://github.com/PolymerElements/paper-menu/issues/110 – daKmoR

答えて

0

paper-menuthis commentとしてポリマー2で推奨されていませんと言う:

この要素はpaper-listboxの賛成で廃止され、ポリマー2.0にすでに移植されています。

関連する問題