title | order | layout |
---|---|---|
PolymerTemplate, Using Parent Layout |
19 |
page |
Usage of polymer based templates is deprecated since Vaadin 18 and we recommend using Lit based templates 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 theRouterLayout
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:
-
Router Layouts and Nested Router Targets for more about parent views.
-
Creating a Simple Component Using the Template API for general information about the
PolymerTemplate
API.