Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

App Layout 2 Migration Guide

Version 2 of AppLayout is introduced in Vaadin 14 and comes with several breaking changes.

Routing

AbstractAppRouterLayout was removed. AppLayout itself now implements RouterLayout. If you have a view like that extended AbstractRouterLayout

Source code
Java
public class MyView extends AbstractRouterLayout {
    ...
}

It should now extend AppLayout

Source code
Java
public class MyView extends AppLayout {
    ...
}

AppLayoutMenu and AppLayoutMenuItem were removed. The same functionality can be achieved by using vaadin-tabs. AppLayoutMenu can be directly replaced with Tabs.

Source code
Java
Tabs menu = new Tabs();
tabs.setWidthFull();

To mimick AppLayoutMenu’s look, use horizontal orientation and place the menu in the navbar.

Source code
Java
tabs.setOrientation(Tabs.Orientation.HORIZONTAL);
appLayout.addToNavbar(true, tabs);

Use vaadin-tab for menu items. To create a navigation item, the recommended approach is to add a router link inside the tab.

Source code
Java
RouterLink link = new RouterLink(null,TargetView.class);
link.add(VaadinIcon.ARROW_RIGHT.create());
link.add("link text");
Tab tab = new Tab();
tab.add(link);
tabs.add(tab);

Additionally, use the appropriate theme variant to place the icon on top of the tab.

Source code
tab.addThemeVariants(TabVariant.LUMO_ICON_ON_TOP);

Branding on navbar

To keep the same look of the previous version with the branding on the top left and having the menu center, add both elements to the navbar.

Source code
Java
Span appName = new Span("Branding");
appName.addClassName("hide-on-mobile");

this.addToNavbar(true, appName, tabs);

and add some styles to shared-styles.html

Source code
HTML
<dom-module id="app-layout-theme" theme-for="vaadin-app-layout">
  <template>
    <style>
      [part="navbar"] {
        align-items: center;
        justify-content: center;
      }
      [part="navbar"]::after {
        content: '';
      }
      [part="navbar"] ::slotted(*:first-child),
      [part="navbar"]::after {
        flex: 1 0 0.001px;
      }
      @media (max-width: 425px) {
        [part="navbar"] ::slotted(.hide-on-mobile) {
          display: none;
        }
        [part="navbar"]::after {
          content: none;
        }
    }
    </style>
  </template>
</dom-module>

<custom-style>
  <style>
    vaadin-app-layout vaadin-tab a:hover {
      text-decoration: none;
    }
    vaadin-app-layout vaadin-tab:not([selected]) a {
      color: var(--lumo-contrast-60pct);
    }
    vaadin-app-layout vaadin-tab iron-icon {
      margin: 0 4px;
      width: var(--lumo-icon-size-m);
      height: var(--lumo-icon-size-m);
      padding: .25rem;
      box-sizing: border-box!important;
    }
  </style>
</custom-style>

New DrawerToggle to open or close the drawer.

To use it, add a instance to the component, tipically to the navbar. It will cause a button to appear that will toggle the navbar when clicked.

Source code
Java
appLayout.addToNavbar(new DrawerToggle());

03AFD16E-8142-42FA-8D8C-124D761C2BDF
OSZAR »