如何将core-scroll-header-panel与core-list一起使用 [英] How to use core-scroll-header-panel with core-list
问题描述
我想将core-scroll-header-panel与core-list结合使用，以便在滚动列表时，标题压缩并消失.特别是对于移动设备，它将最大程度地增加列表空间.我使用了演示并尝试对其进行调整以获得核心列表，但无法使其从页面上滚动标题.我的尝试是在 http://jsbin.com/sivuvu
I'm wanting to use core-scroll-header-panel with core-list so that as I scroll the list the header condenses and disappears. Particularly for mobile that will maximise the space for the list. I took the demo and tried to adapt it for a core-list but failed to get it to scroll the header off the page. My attempts are at http://jsbin.com/sivuvu
任何帮助表示赞赏.
推荐答案
以下是一种可能的解决方案:
Here's one possible solution:
<!doctype html>
<html>
<head>
<script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-list/core-list.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon-button/core-icon-button.html">
<style shim-shadowdom>
body {
font-family: sans-serif;
color: #333;
}
/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
background-image: url(https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demos/images/bg9.jpg);
}
/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
background-color: #f4b400;
}
core-toolbar {
color: #f1f1f1;
fill: #f1f1f1;
background-color: transparent;
}
.title {
-webkit-transform-origin: 0;
transform-origin: 0;
font-size: 40px;
}
.content {
padding: 8px;
background-color: #eee;
}
core-list {
border: solid 1px red;
margin: 10px;
overflow: hidden;
}
div.foo, core-list {
border: solid 1px blue;
margin: 10px;
}
div.row {
height: 80px;
border: solid 1px green;
margin: 3px;
text-align: center;
}
</style>
</head>
<body unresolved fullbleed>
<template is="auto-binding" id="page-template">
<core-scroll-header-panel condenses fit>
<core-toolbar class="tall">
<core-icon-button icon="arrow-back"></core-icon-button>
<div flex></div>
<core-icon-button icon="search"></core-icon-button>
<core-icon-button icon="more-vert"></core-icon-button>
<div class="bottom indent title">Title</div>
</core-toolbar>
<div class="content" flex>
<core-list data="{{data}}" flex>
<template>
<div class="row">
List row: {{index}}, User data from model: {{model.name}}
</div>
</template>
</core-list>
</div>
</core-scroll-header-panel>
</template>
<script>
var t = document.querySelector('#page-template');
t.data = [];
for (i = 0; i < 30; i++) {
t.data.push({name: 'Bob'});
}
t.addEventListener('template-bound', function() {
// custom transformation: scale header's title
var titleStyle = document.querySelector('.title').style;
addEventListener('core-header-transform', function(e) {
var d = e.detail;
var m = d.height - d.condensedHeight;
var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
titleStyle.transform = titleStyle.webkitTransform =
'scale(' + scale + ') translateZ(0)';
});
});
</script>
</body>
</html>
我对您的代码进行了一些更改:我没有将<core-list>包装在自定义的Polymer元素定义中，而是将其包含在主页中，但页面本身是 中，可让您访问所有相同的模板语法您将从自定义元素中获取糖.主要的另一件事是在<core-list>上设置overflow: hidden，并依靠<core-scroll-header-panel>上的滚动条滚动列表的内容.
A few changes that I made to your code: instead of wrapping the <core-list> in a custom Polymer element definition, I just include it as part of the main page, but the page itself is wrapped in <template is="auto-binding">, giving you access to all the same template syntactic sugar you'd get from a custom element. The main other thing was to set overflow: hidden on the <core-list>, and rely on the scrollbar from the <core-scroll-header-panel> to scroll the list's content.
这篇关于如何将core-scroll-header-panel与core-list一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
