Question

我正在尝试编写一个简单的响应式网站，该网站由paper-header-panel和其下的一些标签组成。我刚开始猜测..？问题...

以下是代码及其下方，应如何显示以及实际显示的方式。

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

以下是Google Polymer网站的链接，其中显示了结果：

Responsive Website

以下是我从预览中得到的内容：

提前感谢您的帮助。

Answer 1

要使用flex布局类，还必须将其添加到导入中。

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

您只在代码中添加了非类iron-flex-layout导入，其中仅包含用于flex-layout的mixins。

Answer 2

查看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

Polymer忽略了flullbleed类，但代码似乎很好

2 个答案: