0

我目前正在使用 core-scaffold 作为我的基本应用程序结构。但是，我希望每个页面都有一个不同的工具栏。我想做类似的事情：

<core-scaffold>
        <core-header-panel navigation flex mode="seamed">
            <core-toolbar>
                Veganolux
            </core-toolbar>
            <core-menu>
                <paper-item icon="store" label="Restaurants" on-tap="{{showRestaurants}}"></paper-item>
                <paper-item icon="settings" label="Settings" on-tap="{{showSettings}}"></paper-item>
                <paper-item icon="info" label="About" on-click="{{showAbout}}"></paper-item>
            </core-menu>
        </core-header-panel>
        <div tool>Restaurants</div>
        <core-pages id="pages" selected="0">
            <section id="pageRestaurants">
                <div tool>Toolbar with buttons</div>
            </section>
            <section id="pageSettings">
                <div tool>Toolbar without buttons</div>
            </section>
            <section id="pageAbout">
                <div tool>Toolbar with other buttons</div>
            </section>
        </core-pages>
    </core-scaffold>

然而这是不可能的，因为它不是核心脚手架的直接子代。我知道我可以添加数据绑定来更改标题，但如果我添加不同的按钮/等，它会变得复杂。到工具栏。

4

1 回答 1

1

一种选择是创建一个activePage变量来保存当前选定的页面。您的on-tap事件处理程序将更新activePage变量。然后，您可以包装core-header-panelin 条件模板的部分，例如<template if="{{ activePage === 'restaurants' }}">.

另一种选择是创建多个布局元素并将页面元素包装在这样的布局中http://erikringsmuth.github.io/app-router/#/layouts。

于 2014-08-13T14:22:30.020 回答