Question

我在Polymer 1.0中创建了一个新的webapp，需要以下布局。

一个标题面板，在加载和缩小到小工具栏的高度时覆盖整个页面
响应式抽屉式面板，可在手机的情况下滑动，并可在大屏幕上持久保存。

聚合物已经有了自己的网状组件，即： $(function() { $('#container').highcharts({ chart: { type: 'columnrange' }, title: { text: 'Temperature variation by month' }, subtitle: { text: 'Observed in Vik i Sogn, Norway' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature ( °C )' } }, tooltip: { valueSuffix: '°C' }, plotOptions: { columnrange: { negativeColor: 'red', threshold: 0, dataLabels: { enabled: true, formatter: function() { } } } }, legend: { enabled: false }, series: [{ name: 'Temperatures', data: [ [0,0,9.4], [1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index [2,-3.5,0],[1,0,9.4], [3,-1.4,0],[2,0,19.9], [4,0.0],[4,0,22.6], [5,2.9, 29.5], [6,9.2, 30.7], [7,7.3, 26.5], [8,4.4, 18.0], [9,-3.1,0],[9,0,11.4], [10,-5.2,0],[10,0,10.4], [11,-13.5,0],[11,0,9.8] ] }] }); });和app-header-panel

我想直截了当的解决方案是在标题面板中包含整个抽屉面板。他们工作得很完美，直到我把它们放在一起。我在一起使用时遇到了一些布局问题。

持久抽屉移动到app-drawer-panel后面，而不是粘贴到标题面板的内容区域。（注意：app-header-layout的z-index比app-drawer-panel更高。）

如何解决这个问题？

Answer 1

首先：清除所有尝试更改z-index或postion的css或app-layout的任何组件的其他任何内容，否则它会弄乱组件。

这是我的样本：

<app-drawer-layout fullbleed
                   force-narrow>
    <!-- Drawer content -->
    <app-drawer id="appDrawer"
                swipe-open>
        <app-toolbar>Menu</app-toolbar>

        <!-- Some content -->
    </app-drawer>

    <!-- Main content -->
    <app-header-layout has-scrolling-region>

        <app-header fixed
                    effects="waterfall">
            <app-toolbar>
                <paper-icon-button icon="menu"
                                   drawer-toggle></paper-icon-button>
                <div title>My App</div>
            </app-toolbar>
        </app-header>

        <!-- Some content -->

    </app-header-layout>
</app-drawer-layout>

不要忘记导入所有依赖项：

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

使用app-drawer-layout和app-header-layout

1 个答案: