iron-flex-layout并未应用于主文档

时间:2017-03-18 21:25:08

标签: javascript html polymer

iron-flex-layout未获得申请。谁能指出我做错了什么?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="components/polymer/polymer.html">

    <link rel="import" href="components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="components/paper-button/paper-button.html">
    <style is="custom-style"> 
      body { margin: 0; height: 100vh; @apply(--layout-horizontal); @apply(--layout-center);} 
      body div#utilitiesContainer {  @apply(--layout-horizontal);width:60%; height:auto; height:400px; padding:10px; border-radius:5px; background-color:#000000;@apply(--layout-self-center);}
      body paper-button {@apply(--layout-flex);}
    </style>
  </head>
  <body unresolved>
    <paper-button raised>Raised button</paper-button>
    <div id="utilitiesContainer">
    </div>
  </body>

我正在使用2.0预览

1 个答案:

答案 0 :(得分:1)

在Polymer2.0 is不可用,因为大多数浏览器都不同意。因此,为了使用custom-style,您必须在style标记内包含custom-style标记

<custom-style>
  <style>
  </style>
</custom-style>

此外,您在样式代码中错过了include属性。

以下是一些参考资料