Question

我目前正在学习聚合物，我正在努力解决Polymer网站上的一个例子。例如：https://www.polymer-project.org/1.0/toolbox/app-layout#condensing-header。

我的index.html与Sample工具栏部分中的相同，我刚刚用Condensing Header中的那个替换了主体。

以下是代码：

<!DOCTYPE html>
<html>

  <head>
    <!-- import latest release version of all components from polygit -->
    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="app-layout/app-header/app-header.html">
    <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
    <link rel="import" href="paper-icon-button/paper-icon-button.html">
    <link rel="import" href="paper-tabs/paper-tabs.html">
    <!-- sample-content included for demo purposes only -->
    <link rel="import" href="app-layout/demo/sample-content.html">

    <style is="custom-style">
      body {
        /* No margin on body so toolbar can span the screen */
        margin: 0;
      }
      app-toolbar {
        /* Toolbar is the main header, so give it some color */
        background-color: #1E88E5;
        font-family: 'Roboto', Helvetica, sans-serif;
        color: white;
        --app-toolbar-font-size: 24px;
      }
    </style>
  </head>
  <body>
    <app-header id="header" effects="waterfall" fixed condenses>
    <app-toolbar>
      <div title>Left</div>
      <div title>Title</div>
      <div title>Right</div>
    </app-toolbar>
    <paper-tabs selected="0" primary>
      <paper-tab>Food</paper-tab>
      <paper-tab>Drink</paper-tab>
      <paper-tab>Life</paper-tab>
    </paper-tabs>
  </app-header>
  </body>
</html>

让事情变得更轻松：Plunker

在Polymer教程中，左/标题/右是分别。在标题的左侧，中间和右侧，但在我的版本中，它们都在左侧。知道为什么吗？

由于

聚合物 - 使用app-layout时对齐

0 个答案: