聚合物忽略flullbleed類，但代碼似乎很好

我試圖編寫一個簡單的響應網站由paper-header-panel和它下面的一些選項卡組成。我剛剛開始猜測..？問題...聚合物忽略flullbleed類，但代碼似乎很好

下面是代碼和下面的代碼，它應該如何顯示以及它如何顯示。

<html> 

    <head> 

     <!-- Always load webcomponents and elements you will be using --> 
     <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> 

     <link rel="stylesheet" href="style.css"> 
     <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'> 

     <link rel="import" href="/bower_components/paper-header-panel/paper-header-panel.html"> 
     <link rel="import" href="/bower_components/paper-toolbar/paper-toolbar.html"> 
     <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html"> 
     <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 
     <link rel="import" href="bower_components/iron-icons/iron-icons.html"> 

    </head> 

    <body class="fullbleed"> 

     <paper-header-panel class="felx"> 

      <paper-toolbar class="medium-tall"> 

       <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button> 

       <div class="paper-header" id="toolbarTitle"> C. Piersigilli &#38 Associati </div> 

       <span class="flex"></span> 

       <paper-icon-button icon="more-vert"></paper-icon-button> 

      </paper-toolbar> 

     </paper-header-panel> 

    </body> 

</html>

這裏的鏈接到谷歌的聚合物網站顯示結果：

Responsive Website

這就是我從預覽得到：

預先感謝您幫幫我。

來源

2015-11-19 SimoPiersi

查看Responsive Material Design Layouts Guide。

這裏的標籤例如：

... 
<head> 
... 
    <link rel="import" 
     href="/bower_components/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" 
     href="/bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" 
     href="/bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" 
     href="/bower_components/paper-tabs/paper-tabs.html"> 
    <link rel="import" 
     href="/bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" 
     href="/bower_components/iron-flex-layout/iron-flex-layout.html"> 
... 
<body class="fullbleed vertical layout"> 
    <paper-header-panel class="flex"> 
    <paper-toolbar class="medium-tall"> 
     <paper-icon-button id="navicon" 
         icon="menu"></paper-icon-button> 
     <!-- flex class forces span to fill space between icons --> 
     <span class="flex">Title</span> 
     <!-- icon displays at right because of span class above --> 
     <paper-icon-button id="morebutton" 
         icon="more-vert"></paper-icon-button> 
     <paper-tabs class="bottom fit" selected="0"> 
     <paper-tab>ONE</paper-tab> 
     <paper-tab>TWO</paper-tab> 
     </paper-tabs> 
    </paper-toolbar> 
    <div>Content</div> 
    </paper-header-panel> 
</body> 
...

demo

和導航抽屜例如：

<head> 
    <link rel="import" 
     href="/bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
    <link rel="import" 
     href="/bower_components/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" 
     href="/bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" 
     href="/bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" 
     href="/bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" 
     href="/bower_components/iron-flex-layout/iron-flex-layout.html"> 
... 
<body class="fullbleed vertical layout"> 
    <paper-drawer-panel class="flex"> 
    <paper-header-panel drawer> 
     <paper-toolbar> 
     <div>Application</div> 
     </paper-toolbar> 
     <div> Drawer content... </div> 
    </paper-header-panel> 
    <paper-header-panel main> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <div>Title</div> 
     </paper-toolbar> 
     <div> Main content... </div> 
    </paper-header-panel> 
    </paper-drawer-panel> 
</body>

demo

來源

2015-11-19 22:57:51

使用Flex佈局類，你還必須添加這對你的進口。

<link rel="import" href="/bower_components/iron-flex-layout/classes/iron-flex-layout.html">

你只加在你的代碼的非類iron-flex-layout進口只包括柔性佈局的混入。

來源

2015-11-19 23:16:58

我按照你說的添加了字符串，但它仍然不起作用 – SimoPiersi

聚合物忽略flullbleed類，但代碼似乎很好

回答

相關問題