聚合物-带有霓虹灯动画页面的全屏幕布局
我有个聚合物应用程序。我试着让我的应用程序“全屏”。然而，应用程序的一个区域使用动画。霓虹灯动画页的使用带来了一些挑战。基本上，我正在尝试创建一个布局，如下所示：
+----------------------------------------+
| My App |
+----------------------------------------+
| +---------------------+ +-----------+ |
| | Content A | | Content C | |
| +---------------------+ | details | |
| | go | |
| +---------------------+ | here | |
| | Content B | +-----------+ |
| | This area fills the | |
| | rest of the height | |
| | and is scrollable | |
| | | |
| | | |
| | | |
| +---------------------+ |
+----------------------------------------+neon-animated-pages的使用似乎把高度降低了。此外，组件是嵌套的，这也引起了问题。我创建了一个柱塞这里。我相信有关守则载於本节：
<dom-module id="app-view">
<template>
<neon-animated-pages selected="[[selectedPageIndex]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation" style="height:100%;">
<view-1></view-1>
<view-2></view-2>
</neon-animated-pages>
</template>
<script>
Polymer({
is: "app-view",
ready: function() {
this.selectedPageIndex = 0;
}
});
</script>
</dom-module>这就像设置上面的height CSS属性是不相关的或者什么的。不过我不太确定。我做错了什么？如何获得一个内容区域来填充屏幕的其余部分，并在聚合物世界中制作溢出卷轴？
回答 2
Stack Overflow用户
发布于 2015-12-20 00:13:59
在您的index.html和view-1.html中有一些问题，让我们逐一讨论它们。
index.html
在<body>...</body>标记中，代码可以简化为-
<body class="fullbleed layout vertical">
<template is="dom-bind" id="app">
<paper-header-panel class="flex">
<paper-toolbar>
<div class="spacer title">My App</div>
</paper-toolbar>
<app-view class="fit"></app-view>
</paper-header-panel>
</template>
<script>
addEventListener('WebComponentsReady', function() {});
</script>
</body>注意fullbleed layout vertical on <body>和flex on paper-header-panel。注意，我向fit应用了一个app-view，因此它填充了整个页面。
我还添加了这段CSS来将body的padding设置为0。
body {
padding: 0 !important;
}这是因为身体有一个默认的padding of 24px，如果我不这样做，滚动条将出现在柱塞中。
view-1.html
请参阅下面更新的代码。
<div class="fit horizontal layout">
<div class="flex-9 vertical layout">
<paper-material elevation="1" style="padding:0px;">
Welcome
</paper-material>
<div style="height:24px;"> </div>
<paper-material elevation="1" class="flex" style="background-color:lightblue">
I should fill the remaining height of the screen. xxxxxxxxxxxxxxxxxxxxxxx
</paper-material>
</div>
<div class="flex-3">
<paper-material elevation="1" style="background-color:lightpink">
I should be to the right. My height should be based on my content.
</paper-material>
</div>
</div>在您的代码中，最顶层的div不会将第二个paper-material封装在里面，这就是为什么后者从来没有定位在右侧。
要让第一个paper-material填充页面的其余部分，我必须将其放入另一个vertical layout div中，并使其成为flex。另一方面，为了使第二个paper-material只根据自己的内容获取高度，我只需要将其包装在一个div中，然后将flex-3分配给这个新的div。
就这样!请查看此更新的柱塞，它将显示如下所示的输出。
Stack Overflow用户
发布于 2015-12-17 23:22:19
这里有一个Jsbin链接，它利用聚合物中的布局和灵活定位来实现您想要的东西，我希望它能够帮助您。布局实例聚合物团队创建了一组布局示例和布局元素，您肯定可以找到有用的聚合物布局实例。
下面是您的app-view元素的外观
<dom-module id="app-view">
<style is="custom-style">
:host {
display: flex;
@apply(--layout-vertical);
--paper-button-ink-color: green;
}
paper-button {
background-color: #FF5252;
color: white;
}
.main {
width: 100%;
border: 1px solid yellow;
@apply(--layout-horizontal);
}
.right {
border: 1px solid black;
@apply(--layout-vertical);
width: 100%;
height: 800px;
padding: 5px;
@apply(--layout-flex-3);
}
.contentA {
border: 1px solid green;
height: 20%;
@apply(--layout-vertical);
@apply(--layout-center-center);
margin-bottom: 5px;
}
.contentB {
height: 100%;
@apply(--layout-vertical);
@apply(--layout-flex-1);
@apply(--layout-center-center);
border: 1px solid orange;
}
.contentC {
height: 350px;
@apply(--layout-vertical);
@apply(--layout-flex);
@apply(--layout-center-center) border: 1px solid gray;
}
</style>
<template>
<paper-header-panel flex>
<paper-toolbar>
<div class="spacer title">My App</div>
</paper-toolbar>
<div class="main">
<div class="right">
<div class="contentA"> Content A
<paper-button on-click="toggleView">toggle view</paper-button>
</div>
<div class="contentB">
Content B
<neon-animated-pages selected="{{selectedPageIndex}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<view-1></view-1>
<view-2></view-2>
</neon-animated-pages>
</div>
</div>
<div class="contentC"> Content c</div>
</div>
</paper-header-panel>
</template>
<script>
Polymer({
is: "app-view",
properties: {
selectedPageIndex: Number
},
ready: function() {
this.selectedPageIndex = 0;
},
toggleView: function() {
if(this.selectedPageIndex == 1)
this.selectedPageIndex = 0;
else
this.selectedPageIndex = 1;
}
});
</script>
</dom-module>
https://stackoverflow.com/questions/34337405
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号