Hi!
I have a problem. I want to specify where router outlet should appear. Now it’s always as last element of MainView.
I have class like this:
@Push(transport = Transport.LONG_POLLING)
@HtmlImport("styles/shared-styles.html")
@BodySize(height = "100vh", width = "100%")
@StyleSheet("styles/bootstrap.css")
@Viewport("width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes")
@Theme(Lumo.class)
public class MainView extends FlexLayout implements RouterLayout {
public MainView() {
getStyle()
.set("background-image", "url(frontend/images/background.png)")
.set("background-size", "cover")
.set("min-height", "100%")
.set("background-attachment", "fixed")
.set("--lumo-font-family", "'Lato',Tahoma,Verdana,Arial,sans-serif")
.set("font-family", "var(--lumo-font-family)")
.set("box-sizing", "border-box");
addClassNames("flex-column", "pb-3");
add(new Label("Top label"));
//place where router outlet should appear
add(new Label("Bottom label"));
}
}
Example:
I have two static elements on page, its Label on top of the page, and eg. Label on bottom of the page. I want to show router outlet between them.
@Route(value = "", layout = MainView.class)
@PageTitle("Landing")
public class LandingPage extends FlexLayout {
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
new Label("content");
}
}
So when I go on start page with route “” it should look like this:
Top label
content
Bottom label