首页 文章

无法使Polymer 2 iron-flex-layout工作

提问于
浏览 次
2

我的头靠在墙上 . Barebones Polymer 2.0项目，能够创建我的自定义组件，我无法获得 iron-flex-layout 或 iron-flex-layout-classes 工作 . 已安装Polymer CLI，并使用bower安装Polymer .

目录结构：

/bower_components
    polymer, webcomponentsjs, iron-flex-layout, shadycss

index.html

在index.html内：

<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html"/>

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

    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>

    <style is="custom-style">

        .mixed-in-vertical-layout {
            @apply(--layout-vertical);
        }

    </style>

</head>

<body>

    <div class="horizontal layout">
        <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

    <div class="mixed-in-vertical-layout">
        <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

</body>
</html>

我运行 polymer build ，并将 build/default 目录上传到我的服务器 . 刷新页面，我希望看到"Horizontal A B C"使用 iron-flex-layout-classes.html 提供的 .horizontal.layout 样式，并且"Vertical A B C"使用页面中 head 元素内的样式的@apply规则 .

这些都没有发生 . 我相信我跟着guide到了T，当我检查第一个元素时，我在检查器中看到的并不是't work. Here'：

Styles not showing up

这是第二个：

Injection doesn't work

正如您所看到的，在检查器的CSS区域中，“从html继承”块正在显示所有混合 . 我很确定它不应该像那样出现在那里 . 这里是特写：

A few rules are crossed out by Chrome

在CSS var定义中包含@apply的行被划掉 . 我完全糊涂了 . 我的聚合物安装是否以某种方式搞砸了？但是，我没有错误，我的自定义元素似乎工作（除了iron-flex的东西，类或@apply） .

我尝试使用纸质组件，它也可以工作，但看起来没有风格 .

有线索吗？

提前致谢 .

javascript css flexbox polymer polymer-2.x

2 回答

  • 3

    你只需要用<custom-element>包装你的 <style> 元素 .

    <html lang="en">

<head>
  <meta charset="UTF-8">

  <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />

  <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout-classes.html">

  <custom-style>
    <style include="iron-flex iron-flex-alignment"></style>
  </custom-style>
  
  <custom-style>
    <style>
      .mixed-in-vertical-layout {
        @apply --layout-vertical;
      }
    </style>
  </custom-style>

</head>

<body>

  <div class="horizontal layout">
    <div>Horizontal</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>

  <div class="mixed-in-vertical-layout">
    <div>Vertical</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>

</body>

</html>
    回复于
  • 3

    我'm thinking you can't到了 iron-flex-layout-classes.html 中的样式，因为它们被Shadow DOM掩盖了 . 您应该使用CSS变量来获取它们 . 此外，您必须将 <style> 包裹在 <custom-style> 中 . 试试this代码：

    <html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html"/>
    <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">

    <custom-style>
      <style is="custom-style">
        .mixed-in-vertical-layout {
          @apply --layout-vertical;
        }
        .horizontal-layout {
          @apply --layout-horizontal;
        }
      </style>
    </custom-style>

  </head>
  <body>

    <div class="horizontal-layout">
      <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

    <div class="mixed-in-vertical-layout">
      <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

  </body>
</html>
    回复于

相关问题