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

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

css polymer

Css 聚合物-混合铁柔性布局和霓虹动画页面,css,polymer,Css,Polymer,我正在用聚合物构建一个应用程序。我正在尝试使用iron flex布局来布局我的应用程序。理论上，这对我来说是有意义的。然而，实际上，我似乎无法使它与嵌套元素一起工作。目前，我有以下几点： index.html <html> <head> <title>My App</title> <meta charset="utf-8"> <meta name="viewport" content="width=de

我正在用聚合物构建一个应用程序。我正在尝试使用iron flex布局来布局我的应用程序。理论上，这对我来说是有意义的。然而，实际上，我似乎无法使它与嵌套元素一起工作。目前，我有以下几点：

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>

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

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

我原以为只有一颗星（*）的角色是淡珊瑚。然后，带有两颗星星（**）的部分将变为淡鲑鱼。最后，应用程序的主要部分应为浅黄色。然而，整个事情是轻珊瑚。我不明白我做错了什么。

iron flex布局是否不起作用？还是有什么我完全不知道的
更新：
下面是一个更新，显示了mixin的添加。即使添加了这个mixin，我仍然在chrome控制台中看到一个错误，上面写着：/deep/combinator不推荐使用
<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>


.平面布置图{
@应用（--水平布局）；
}       
项目1
项目2
项目3
您需要应用mixin，如Polymer:
的新博客中所述。您需要应用mixin，如Polymer:的新博客中所述。不幸的是，这对我来说似乎不是问题。除非我用错了。这似乎是一个非常简单的问题。我不确定我做错了什么。在您展示给我们的代码中，mixin没有应用…：）我在问题上加了一个例子。我加了调味品，但还是有问题。感谢您的帮助。您使用的是最新版本的聚合物及其组件吗？我使用的是聚合物：1.2.3。铁元素：1.0.5和纸元素：1.0.6不幸的是，这似乎不是我的问题。除非我用错了。这似乎是一个非常简单的问题。我不确定我做错了什么。在您展示给我们的代码中，mixin没有应用…：）我在问题上加了一个例子。我加了调味品，但还是有问题。感谢您的帮助。您使用的是最新版本的聚合物及其组件吗？我使用的是聚合物：1.2.3。铁元素：1.0.5，纸元素：1.0.6
<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>