Question

我的代码如下：

<body unresolved>
  <core-header-panel>
   <core-toolbar layout horizontal center>
    <h1 flex>Title</h1>
    <a href="#" class="middle indent">Users</a>
    <a href="#" class="middle indent">Terms</a>
  </core-toolbar>

  <div class="container" layout horizontal>
    <core-input placeholder="Placeholder text here"></core-input>
  </div>
 </core-header-panel>
</body>

问题是我的核心输入组件没有被渲染。核心标题面板和核心工具栏可以，但核心输入没有。它的宽度和高度为0px。即使我为它指定了宽度和高度，它也没有任何内部渲染。我正在使用导入加载所有组件。

我错过了什么吗？

进口是：

<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../custom-components/admin-users.html">
<link rel="import" href="../components/core-input/core-input.html">

Chrome是版本38。

Answer 1

来自documentation：

重要：如果其父级没有高度，则不会显示核心标题面板。

使用适当的高度和宽度属性为core-header-panel设置样式将显示占位符。 Live Demo available here

更新HTML导入以包含核心工具栏：

  <link rel="import" href="../components/font-roboto/roboto.html">
  <link rel="import" href="../components/core-header-panel/core-header-panel.html">
  <link rel="import" href="../components/core-toolbar/core-toolbar.html">
  <link rel="import" href="../components/core-input/core-input.html">

并在与HTML导入相同的页面上添加此样式：

<style>
  core-header-panel {
    width: 360px;
    height: 400px;
  }
</style>

Answer 2

替换

<core-input placeholder="Placeholder text here"></core-input>

与

<input is="core-input" placeholder="Placeholder text here">

聚合物核心输入无法渲染

2 个答案: