Javascript 聚合物：构建嵌套的纸张选项卡和核心页_Javascript_Html_Polymer

Javascript 聚合物：构建嵌套的纸张选项卡和核心页

javascript html polymer

Javascript 聚合物：构建嵌套的纸张选项卡和核心页,javascript,html,polymer,Javascript,Html,Polymer,我正在尝试创建嵌套的纸张选项卡和核心页面。我的问题是，在选择了选项卡2之后，页面内容11或页面内容12被保留下来。在我的案例中，如何隐藏由div括起的未选择的页面内容 index.html： <!doctype html> <html> <head> <title>Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf

我正在尝试创建嵌套的纸张选项卡和核心页面。我的问题是，在选择了选项卡2之后，页面内容11或页面内容12被保留下来。在我的案例中，如何隐藏由div括起的未选择的页面内容

index.html：

<!doctype html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="page.css">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="my-page.html">
    <style>
        html,body {
            height: 100%;
            margin: 0;
            font-size:62.5%;
        }
        core-header-panel {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch; 
            font-size:3em;
        }
    </style>
</head>
<body unresolved>
    <core-header-panel>
        <my-page id="p"></my-page>
    </core-header-panel>
    <script>
        data=[
            {
                TabCaption:"Tab 1"
                ,children:[
                    {
                        TabCaption:"Tab 11"
                        ,PageContent:"Page Content 11"
                        ,children:null
                    }
                    ,{
                        TabCaption:"Tab 12"
                        ,PageContent:"Page Content 12"
                        ,children:null
                    }
                ]
            }
            ,{
                TabCaption:"Tab 2"
                ,PageContent:"Page Content 2"
                ,children:null
            }
        ];
        document.querySelector("#p").pages=data;
    </script>
</body>
</html>

my-page.html：

<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages">
    <template repeat if="{{pages}}">
        <style>
            paper-tabs {
                margin: 0;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                text-transform: uppercase;
                color: #F00;
                background-color: #00BCD4;
            }
            core-selected {
                background-color: #00FF00;
            }
            paper-tab {
                font-size:1.6em;
            }
        </style>
        <paper-tabs selected="{{selected}}" flex self-end layout>
            <template repeat="{{p in pages}}">
                <paper-tab>{{p.TabCaption}}</paper-tab>
            </template>
        </paper-tabs>
        <core-pages selected="{{selected}}">
            <template repeat="{{p in pages}}">
                <div one flex vertical layout>
                    <template if="{{p.PageContent}}">
                        {{p.PageContent}}
                    </template>
                    <template if="{{p.children}}">
                        <my-page pages="{{p.children}}"></my-page>
                    </template>
                </div>
            </template>
        </core-pages>
    </template>
    <script>
        Polymer({
            selected:0
        });
    </script>
</polymer-element>

提前感谢您的启示

编辑： @乔佩施瓦茨：谢谢你的帮助！我从中学到了很多

IceweaselV.35的行为与我原来文章中的屏幕截图相同。铬v.40呈现不正确的效果

检查浏览器调试器中的元素后，我发现包含页面内容的div呈现为零高度。为了解决这个问题，我使用了以下步骤：

在index.html中：

<!doctype html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="page.css">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="my-page.html">
    <style>
        html,body {
            height: 100%;
            margin: 0;
            font-size:62.5%;
        }
        core-header-panel {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch; 
            font-size:3em;
        }
    </style>
</head>
<body unresolved>
    <core-header-panel>
        <my-page id="p"></my-page>
    </core-header-panel>
    <script>
        data=[
            {
                TabCaption:"Tab 1"
                ,children:[
                    {
                        TabCaption:"Tab 11"
                        ,PageContent:"Page Content 11"
                        ,children:null
                    }
                    ,{
                        TabCaption:"Tab 12"
                        ,PageContent:"Page Content 12"
                        ,children:null
                    }
                ]
            }
            ,{
                TabCaption:"Tab 2"
                ,PageContent:"Page Content 2"
                ,children:null
            }
        ];
        document.querySelector("#p").pages=data;
    </script>
</body>
</html>

根据向元素添加fullbleed属性。这会告诉实体占用视口中的所有可用空间

<body unresolved fullbleed>

在my-page.html中：

<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages">
    <template repeat if="{{pages}}">
        <style>
            paper-tabs {
                margin: 0;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                text-transform: uppercase;
                color: #F00;
                background-color: #00BCD4;
            }
            core-selected {
                background-color: #00FF00;
            }
            paper-tab {
                font-size:1.6em;
            }
        </style>
        <paper-tabs selected="{{selected}}" flex self-end layout>
            <template repeat="{{p in pages}}">
                <paper-tab>{{p.TabCaption}}</paper-tab>
            </template>
        </paper-tabs>
        <core-pages selected="{{selected}}">
            <template repeat="{{p in pages}}">
                <div one flex vertical layout>
                    <template if="{{p.PageContent}}">
                        {{p.PageContent}}
                    </template>
                    <template if="{{p.children}}">
                        <my-page pages="{{p.children}}"></my-page>
                    </template>
                </div>
            </template>
        </core-pages>
    </template>
    <script>
        Polymer({
            selected:0
        });
    </script>
</polymer-element>

将垂直布局属性添加到组件中，将flex属性添加到元素中，以使其占用：

    <polymer-element name="my-page" attributes="pages" vertical layout>
    . . . 
    <core-pages selected="{{selected}}" flex>

最后，虽然这不是严格必要的，但我注意到样式部分中的core selected选择器应该为.core selected，如果您想选择该名称的CSS类

为完整起见，以下是代码的编辑版本：

index.html my-page.html

<!doctype html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="page.css">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="my-page.html">
    <style>
        html,body {
            height: 100%;
            margin: 0;
            font-size:62.5%;
        }
        core-header-panel {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch; 
            font-size:3em;
                    }
    </style>
</head>
<body unresolved fullbleed>
    <core-header-panel vertical layout>
        <my-page flex id="p"></my-page>
    </core-header-panel>
    <script>
        data=[
            {
                TabCaption:"Tab 1"
                ,children:[
                    {
                        TabCaption:"Tab 11"
                        ,PageContent:"Page Content 11"
                        ,children:null
                    }
                    ,{
                        TabCaption:"Tab 12"
                        ,PageContent:"Page Content 12"
                        ,children:null
                    }
                ]
            }
            ,{
                TabCaption:"Tab 2"
                ,PageContent:"Page Content 2"
                ,children:null
            }
        ];
        document.querySelector("#p").pages=data;
    </script>
</body>
</html>

<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-pages/core-pages.html">
<polymer-element name="my-page" attributes="pages" vertical layout>
    <template repeat if="{{pages}}">
        <style>
            paper-tabs {
                margin: 0;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                text-transform: uppercase;
                color: #F00;
                background-color: #00BCD4;
                            }

            .core-selected {
                            background-color: #00FF00;
            }
            paper-tab {
                font-size:1.6em;
                            }
        </style>
        <paper-tabs selected="{{selected}}" layout>
            <template repeat="{{p in pages}}">
                <paper-tab>{{p.TabCaption}}</paper-tab>
            </template>
        </paper-tabs>
        <core-pages selected="{{selected}}" flex>
            <template repeat="{{p in pages}}">
                <div one flex vertical layout>
                    <template if="{{p.PageContent}}">
                        {{p.PageContent}}
                    </template>
                    <template if="{{p.children}}">
                        <my-page pages="{{p.children}}"></my-page>
                    </template>
                </div>
            </template>
        </core-pages>
    </template>
    <script>
        Polymer({
            selected:0
        });
    </script>
</polymer-element>