Docs

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

Docs

Application Headers & Footers

As stated in the overview the Business App Starter is structured as follows:

structure

You can configure the application’s headers and footers in MainLayout::initHeadersAndFooters. The only difference between these is their placement in the UI. Any Component, and any number of Components, can be slotted in.

Headers

Headers typically house logos, titles, toolbars and tabs.

Example

How to place Tabs in the outer/inner header.

Source code
Java
private void initHeadersAndFooters() {
  Tab tab1 = new Tab("Tab 1");
  Tab tab2 = new Tab("Tab 2");
  Tabs tabs = new Tabs(tab1, tab2);
  setAppHeaderOuter(tabs);
}
header outer

If you instead use setAppHearInner you get:

header inner

Footers

Most typically used for mobile navigation. Status bars, toolbars and summaries are also pretty common.

Example 1

Using the inner footer for mobile navigation.

Source code
Java
Button home = UIUtils.createTertiaryButton(VaadinIcon.HOME);
Button clock = UIUtils.createTertiaryButton(VaadinIcon.CLOCK);
Button users = UIUtils.createTertiaryButton(VaadinIcon.USERS);
Button search = UIUtils.createTertiaryButton(VaadinIcon.SEARCH);
Button bell = UIUtils.createTertiaryButton(VaadinIcon.BELL);

// Set the width
for (Button button : new Button[]{home, clock, users, search, bell}) {
  button.setWidth("20%");
}

FlexLayout footer = new FlexLayout(home, clock, users, search, bell);

// Set background color and shadow
UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
UIUtils.setShadow(Shadow.M, footer);

setAppFooterInner(footer);
footer inner

Example 2

Status bar located in the outer footer.

Source code
Java
Icon icon = UIUtils.createIcon(IconSize.S, TextColor.SUCCESS, VaadinIcon.CHECK);
Label label = UIUtils.createLabel(FontSize.XS, TextColor.BODY, "Online");

FlexLayout footer = new FlexLayout(icon, label);

// Set the alignment
footer.setAlignItems(Alignment.CENTER);

// Add spacing and padding
footer.addClassNames(
  LumoStyles.Spacing.Right.S,
  LumoStyles.Padding.Wide.M
);

// Set background color and shadow
UIUtils.setBackgroundColor(LumoStyles.Color.BASE_COLOR, footer);
UIUtils.setShadow(Shadow.M, footer);

setAppFooterOuter(footer);
footer outer

6CE84BDF-759C-4964-A481-62BD0648E043