Question

我刚刚学习聚合物，并且一直在关注本网站的教程：polymer-project.org

我正处于我要在核心标题面板上放置纸质标签的部分。在本教程之后，我无法完全呈现纸张标签。但是，如果我删除core-header-panel和core-toolbar标签，我就能够渲染它们。

这里是不会呈现标签的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="bower_components/platform/platform.js" ></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/font-roboto/roboto.html">
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
</head>

<body unresolved touch-action="auto">
    <core-header-panel>
        <core-toolbar>
            <paper-tabs valueattr="name" selected="all" self-end>
                <paper-tab name="all">All</paper-tab>
                <paper-tab name="favorites">FAVORITES</paper-tab>
            </paper-tabs>
        </core-toolbar>
    </core-header-panel>
<script>
    var tabs = document.querySelector('paper-tabs');
    tabs.addEventListener('core-select', function(){
        console.log("Selected: " + tabs.selected);
    });
</script>

</body>

以下是呈现标签的代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="bower_components/platform/platform.js" ></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/font-roboto/roboto.html">
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
</head>

<body unresolved touch-action="auto">

            <paper-tabs valueattr="name" selected="all" self-end>
                <paper-tab name="all">All</paper-tab>
                <paper-tab name="favorites">FAVORITES</paper-tab>
            </paper-tabs>

<script>
    var tabs = document.querySelector('paper-tabs');
    tabs.addEventListener('core-select', function(){
        console.log("Selected: " + tabs.selected);
    });
</script>

</body>
</html>

Answer 1

好的，我现在明白了。我只需要将core-header-panel的高度设置为height：100％; 我认为聚合物自动将标签指定为高度：100％;

聚合物纸标签无法正确呈现

1 个答案: