Vaadin Button with text on multiple lines

Vaadin 6 / 7 / 8
1

I have a navigation bar with buttons that need to have multi line text (3 rows). I’m not sure how to do this or if it’s even possible.

Here is the code snippet:

private Map<String, Button> menuItems = new HashMap<>();

public NavBar() {
    buildLayout();
    addComponent(buildTitle());
}

private void buildLayout() {
    setHeight("100%");
    setWidth(null);
    addStyleName(AventxTheme.MENU_ROOT);
    addStyleName(AventxTheme.MENU_PART);
    addStyleName(AventxTheme.NAVBAR);
}

private Component buildTitle() {
    Label menuTitle = new Label("AventX <strong>Web</strong>", ContentMode.HTML);
    menuTitle.setSizeUndefined();
    HorizontalLayout menuTitleWrapper = new HorizontalLayout(menuTitle);
    menuTitleWrapper.setComponentAlignment(menuTitle, Alignment.MIDDLE_CENTER);
    menuTitleWrapper.addStyleName(AventxTheme.MENU_TITLE);

    return menuTitleWrapper;
}

@Override
public boolean beforeViewChange(ViewChangeEvent viewChangeEvent) {
    return true;
}

@Override
public void afterViewChange(ViewChangeEvent event) {
    menuItems.values().forEach(button -> button.removeStyleName(AventxTheme.SELECTED));
    Button button = menuItems.get(event.getViewName());
    if (button != null) button.addStyleName(AventxTheme.SELECTED);
}

public void addMenuItem(String displayText) {
    Button menuItem= new Button(displayText,
            click -> EventBus.post(new NavigationEvent(displayText)));
    menuItem.addStyleName(AventxTheme.MENU_ITEM);
    menuItem.addStyleName(AventxTheme.BUTTON_BORDERLESS);
    menuItem.setIcon(getMenuItemIconFor());
    menuItem.setWidth("100%");

    menuItems.put(displayText, menuItem);

    addComponent(menuItem, components.size());
}

private Resource getMenuItemIconFor() {
    return FontAwesome.FILE_TEXT_O;
}

Does anyone know how to achive this? If not possible to do it with button, what is the proper way to achieve this? I need is a navigation menu item, that has click listener, is borderless, and text spans multiple lines.

Thanks.

2

com.vaadin.ui.Button doesn’t seem to handle multiple rows that well. com.vaadin.ui.NativeButton does better job. setCaptionAsHtml(true) and setCaption(“My
multi-line
caption!”);
Although you have to then theme the button yourself.