Documentation

Documentation

Using Parent Layout

Polymer templates are deprecated. Lit templates are recommended instead.

A PolymerTemplate can be used as a parent layout by using the <slot> in the position where the child view should be displayed.

Example: JavaScript Polymer template showing the actual view, MainLayout, below a heading and menu.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MainLayout extends PolymerElement {
    static get template() {
        return html`
            <h1>Site title</h1>
            <div class="menu">...</div>
            <!-- child content comes here -->
            <slot></slot>
        `;
    }
    static get is() {
        return 'main-layout'
    }
}
customElements.define(MainLayout.is, MainLayout);

To use this template file, you need a basic Java template class that is mapped to the JavaScript template file (using the @JsModule annotation) and that implements the RouterLayout interface.

Example: Mapped Java template class that imports the JavaScript template and implements RouterLayout.

@Tag("main-layout")
@JsModule("./com/example/main-layout.js")
public class MainLayout extends PolymerTemplate<TemplateModel>
        implements RouterLayout {
}

  • The showRouterLayoutContent(HasElement) method in the RouterLayout interface has a default implementation. This makes it unnecessary to write additional code, but you can override and re-implement it, if necessary.

You can now use MainLayout as a parent layout using the @Route or @ParentLayout annotations.

Example: Using the layout parameter in the @Route annotation to mark MainLayout as the parent layout.

@Route(value="editor", layout=MainLayout.class)
public class Editor extends Div {
}
@ParentLayout(MainLayout.class)
public class MenuBar extends Div {
}

See the following resources for related information:

24E23F32-0623-456B-8F09-EE90F9605FA4