Polymer 聚合物纸张标签未正确渲染_Polymer

Polymer 聚合物纸张标签未正确渲染

polymer

Polymer 聚合物纸张标签未正确渲染,polymer,Polymer,我刚刚学习了polymer，并且一直在遵循这个网站上的教程：polymer-project.org 我在核心标题面板上放置纸张标签的位置。在本教程之后，我无法完全渲染纸张选项卡。但是，如果我删除核心标题面板和核心工具栏标记，我就能够渲染它们以下是不呈现选项卡的代码： <!DOCTYPE html> <html> <head> <title></title> <script src="bower_component

我刚刚学习了polymer，并且一直在遵循这个网站上的教程：polymer-project.org

我在核心标题面板上放置纸张标签的位置。在本教程之后，我无法完全渲染纸张选项卡。但是，如果我删除核心标题面板和核心工具栏标记，我就能够渲染它们

以下是不呈现选项卡的代码：

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


全部的
最爱
var tabs=document.querySelector（“纸质选项卡”）；
tabs.addEventListener（'core-select'，function（）{
console.log（“所选：”+选项卡。所选）；
});

下面是呈现选项卡的代码：

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


全部的
最爱
var tabs=document.querySelector（“纸质选项卡”）；
tabs.addEventListener（'core-select'，function（）{
console.log（“所选：”+选项卡。所选）；
});

好的，我现在知道了。我只需要将核心标题面板的高度设置为高度：100%；我以为polymer会自动将标签指定为高度：100%