2014-07-07 74 views
3

我剛剛學習的聚合物和一直跟隨在本網站的教程聚合物紙標籤首部的面板。在教程之後,我無法完全呈現紙張選項卡。但是如果我刪除核心標題面板和核心工具欄標籤,我就可以渲染它們。不能正常呈現

下面是不呈現標籤的代碼:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="bower_components/platform/platform.js" ></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/font-roboto/roboto.html"> 
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html"> 
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html"> 
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> 
</head> 

<body unresolved touch-action="auto"> 
    <core-header-panel> 
     <core-toolbar> 
      <paper-tabs valueattr="name" selected="all" self-end> 
       <paper-tab name="all">All</paper-tab> 
       <paper-tab name="favorites">FAVORITES</paper-tab> 
      </paper-tabs> 
     </core-toolbar> 
    </core-header-panel> 
<script> 
    var tabs = document.querySelector('paper-tabs'); 
    tabs.addEventListener('core-select', function(){ 
     console.log("Selected: " + tabs.selected); 
    }); 
</script> 

</body> 

而這裏呈現的標籤代碼:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="bower_components/platform/platform.js" ></script> 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/font-roboto/roboto.html"> 
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html"> 
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html"> 
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> 
</head> 

<body unresolved touch-action="auto"> 

      <paper-tabs valueattr="name" selected="all" self-end> 
       <paper-tab name="all">All</paper-tab> 
       <paper-tab name="favorites">FAVORITES</paper-tab> 
      </paper-tabs> 

<script> 
    var tabs = document.querySelector('paper-tabs'); 
    tabs.addEventListener('core-select', function(){ 
     console.log("Selected: " + tabs.selected); 
    }); 
</script> 

</body> 
</html> 

回答

1

好,我知道現在。我只需要將核心接頭面板的高度設置爲高度:100%; 我認爲聚合物自動分配標籤的高度:100%;