Question

我正在使用Polymer构建应用程序。我正在尝试使用iron-flex-layout布局我的应用。从理论上讲，这对我来说很有意义。但实际上，我似乎无法使用嵌套元素。目前，我有以下内容：

的index.html

<html>
  <head>
    <title>My App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">    

    <script src="res/components/webcomponentsjs/webcomponents-lite.min.js"></script> 

    <!-- Polymer -->
    <link rel="import" href="res/components/polymer/polymer.html"> 

    <link rel="import" href="res/components/iron-flex-layout/classes/iron-flex-layout.html">
    <!-- End of Polymer -->

    <link rel="import" href="app.html"> 
    <link rel="import" href="page-home.html">
    <link rel="import" href="page-login.html">
  </head>

  <body class="fullbleed" style="background-color:lightcoral;">
    <div class="vertical layout">
      <div><h2>Hello</h2></div>
      <app-shell flex></app-shell>    
    </div>
  </body>
</html>

上面引用的app.html如下所示：

app.html

<dom-module id="app-shell">
    <template>
        <style>
            :host {
                background-color:lightsalmon;                  
            }
        </style>

        <!-- Determine which view to load -->
        <h3>Enjoy!</h3>
        <neon-animated-pages flex id="pages" selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
            <page-home></page-home>
            <page-login></page-login>       
        </neon-animated-pages> 
        </div>                          
    </template>
</dom-module>

<script>
    Polymer({
        is: 'app-shell',
        properties: {
            selectedPageIndex: {
                type: Number,
                value: 0
            }
        }
    });
</script>

而且，为了提供其中一个页面的示例，我有：

页-home.html的

<dom-module id="page-home">
    <template>
      <style>
        :host {
          background-color:lightyellow;
        }
      </style>

      <div class="vertical layout center-justified">
        <h4>Welcome to My App!</h4|>
        <h5>I hope you like it!</h5>
      </div>                            
    </template>

    <script>
        Polymer({
            is: "page-home"
        });
  </script> 
</dom-module>

上面的代码并没有表现出我的预期。颜色不与元素层次结构对齐。此外，主要内容根本不垂直或水平居中。为了了解Polymer Elements的工作原理，我尝试创建一个如下所示的布局：

+-----------------------------------------------+
| Hello *                                       |
+-----------------------------------------------+
| Enjoy! **                                     |
+-----------------------------------------------+
|                                               |
|                                               |
|                                               |
|              Welcome to my App!               |
|              I hope you like it!              |
|                                               |
|                                               |
|                                               |
+-----------------------------------------------+

我期待有一颗星（*）的部分是浅珊瑚。然后，有两颗星（**）的部分是淡鲑鱼。最后，应用程序的主要部分是淡黄色。然而，整个事情是轻珊瑚。我不明白我做错了什么。 iron-flex-layout不起作用吗？或者我在这里完全缺少什么？

更新下面是一个更新，显示了mixin的添加。即使添加了这个mixin，我仍然在chrome控制台中出现错误：/deep/ combinator is deprecated。

<html>
  <head>
    <style is="custom-style">
        .horizontal-layout {
            @apply(--layout-horizontal);
        }       
    </style>     
  </head>

  <body class="fullbleed" style="background-color:lightcoral;">
    <div class="horizontal-layout">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  </body>
</html>

Answer 1

您需要应用mixins，如Polymer的全新博客文章中所述：https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/

聚合物 - 混合铁 - 柔性布局和霓虹动画页面

1 个答案: