Различная панель инструментов для каждой страницы в основной платформе

Question

В настоящее время я использую 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>

Это, однако, невозможно, потому что не является прямым потомком ядра-скаффолда. Я знаю, что мог бы добавить привязку данных, чтобы изменить заголовок, но становится сложнее, если я добавляю разные кнопки / и т.д. на панель инструментов.

Answer 1

Одним из вариантов является создание activePage переменная, которая содержит текущую выбранную страницу. Ваш on-tap обработчики событий будут обновлять activePage переменная. Тогда вы можете обернуть разделы core-header-panel в условных шаблонах вроде <template if="{{ activePage === 'restaurants' }}">,

Другой вариант - создать несколько элементов макета и обернуть элемент страницы в макет, например, http://erikringsmuth.github.io/app-router/.