聚合物：构建嵌套的纸制标签和核心页
[英]Polymer: building nested paper-tabs and core-pages
问题描述
I am trying to create nested paper-tabs and core-pages . 
我正在尝试创建嵌套的paper-tabs和core-pages 。 My problem is that after Tab 2 is selected, Page Content 11 or Page Content 12 is left over. 我的问题是选择了选项卡2后， 页面内容11或页面内容12被保留了。 How do I hide the unselected "page content", enclosed by div in my case? 在我的情况下，如何隐藏div包围的未选择的“页面内容”？
index.html: 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: 我-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>
Thank you in advance for the enlightenment! 预先感谢您的启发！
Edit: @JoppeSchwartz: Thank you for your kind help! 编辑： @JoppeSchwartz：谢谢您的帮助！ I learn a lot from it. 我从中学到了很多。
Iceweasel v.35 behaves the same as those screen shots in my original post. Iceweasel v.35的行为与我原始帖子中的屏幕快照相同。 Chromium v.40 renders incorrect effects. Chromium v.40呈现不正确的效果。
1 个解决方案
解决方案1
0 2015-02-14 17:17:05
After inspecting the elements in the browser debugger, I find that the div enclosing the PageContent is being rendered with zero height. 在浏览器调试器中检查了元素之后，我发现包含PageContent的div的高度为零。 To resolve this, I used the following steps: 要解决此问题，我使用了以下步骤：
In
index.html:在index.html：Add the
fullbleedattribute to the<body>element, per the Polymer layout docs .根据Polymer布局docs将fullbleed属性添加到<body>元素。 This tells the body to take up all available space in the viewport.这告诉身体占据视口中的所有可用空间。 <body unresolved fullbleed>Add the
vertical layoutandflexattributes to the code in the body so that they take up available vertical space:将vertical layout和flex属性添加到主体中的代码，以便它们占用可用的垂直空间：<core-header-panel vertical layout> <my-page flex id="p"></my-page> </core-header-panel>
In
my-page.html:在my-page.html：Add the
vertical layoutattributes to the<my page>component and theflexattribute to the ` element so that it takes up :将vertical layout属性添加到<my page>组件，并将flex属性添加到`元素，以便它占用：<polymer-element name="my-page" attributes="pages" vertical layout> . . . <core-pages selected="{{selected}}" flex>At this point, the
<paper-tabs>will be pushed to the right side of the page.此时， <paper-tabs>将被推到页面的右侧。 This is not what you want, I gather, so remove theself-endattribute:我收集到的不是您想要的，所以删除self-end属性：<paper-tabs selected="{{selected}}" layout>Finally, although this is not strictly necessary, I noticed that the
core-selectedselector in your style section should read.core-selectedif you want to select the CSS class of that name.最后，尽管这不是绝对必要的，但我注意到，如果要选择该名称的CSS类，则样式部分中的core-selected选择器应显示为.core-selected。
For completeness, here are the edited versions of your code: 为了完整起见，以下是代码的编辑版本：
index.html 的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 我-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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.