Question

我正在尝试创建嵌套的paper-tabs和core-pages。我的问题是，选择标签2 后，网页内容11 或网页内容12 将被遗留下来。如何在我的案例中隐藏div所包含的未选择的＆＃34;页面内容＆＃34;？

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

提前感谢您的启蒙！

TAB 1 - TAB 11

Circled content should be hidden.

修改 @JoppeSchwartz：谢谢你的热心帮助！我从中学到了很多东西。

Iceweasel v.35的行为与原始帖子中的屏幕截图相同。 Chromium v.40会产生不正确的效果。

Chromium - clicking on "TAB 1" Chromium - clicking on "TAB 2" Iceweasel - clicking on "TAB 1" Iceweasel - clicking on "TAB 2"

Answer 1

在检查浏览器调试器中的元素之后，我发现包含PageContent的div正在呈现为零高度。为解决此问题，我使用了以下步骤：

在index.html：
- 根据the Polymer layout docs将fullbleed属性添加到<body>元素。这告诉正文占据视口中的所有可用空间。
```
<body unresolved fullbleed>
```
- 将vertical layout和flex属性添加到正文中的代码中，以便它们占用可用的垂直空间：
```
<core-header-panel vertical layout>
    <my-page flex id="p"></my-page>
</core-header-panel>
```
在my-page.html：
- 将vertical layout属性添加到<my page>组件，将flex属性添加到`元素，以便它占用：
```
    <polymer-element name="my-page" attributes="pages" vertical layout>
    . . . 
    <core-pages selected="{{selected}}" flex>
```
- 此时，<paper-tabs>将被推送到页面的右侧。这不是你想要的，我收集，所以删除self-end属性：
```
    <paper-tabs selected="{{selected}}" layout>
```
- 最后，虽然这不是绝对必要的，但我注意到如果要选择该名称的CSS类，则样式部分中的core-selected选择器应显示为.core-selected。

为了完整性，以下是您的代码的编辑版本：

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

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

聚合物：构建嵌套纸张标签和核心页面

1 个答案:

的index.html

MY-page.html中