FlexLayout Add-on

Java API for CSS Flexbox

View larger

Close

View larger

Close

FlexLayout is a UI component add-on for Vaadin 8. This add-on brings the configuration of CSS Flexbox to Java.

There's a handy builder style API for creating FlexLayout for all needs, for example you can make a vertical layout that wraps into columns with the following example code:

FlexLayout.create().vertical().wrap().alignItems().center().build();

The items in the columns will be horizontally in the middle if the column.

This add-on is implemented without the need for widgetset changes. It can be imported to a project without the need for client-side compilation.

Sample code

String[] testLabels = { "Test ", "Test String ", "Foo ", "Bar " };

FlexLayout columnLayout = FlexLayout.create().vertical().wrap()
        .alignItems().baseline().build();
columnLayout.setSizeFull();

IntStream.range(0, 100).boxed().map(i -> testLabels[i % 4] + i)
        .map(Label::new).forEach(columnLayout::addComponent);

FlexLayout tagLayout = new FlexLayout();
tagLayout.setFlexDirection(FlexDirection.Row);
tagLayout.setFlexWrap(FlexWrap.Wrap);
tagLayout.setAlignContent(AlignContent.FlexStart);

tagLayout.setWidth("400px");
tagLayout.setHeight("100%");

Stream.of("HTML", "CSS", "JavaScript", "Java", "Vaadin", "Undertow",
        "Internet Explorer", "Chrome", "Firefox", "Safari")
        .map(caption -> {
            Button button = new Button(caption);
            button.addStyleName(ValoTheme.BUTTON_LINK);
            button.addClickListener(
                    e -> tagLayout.removeComponent(button));
            return button;
        }).forEach(tagLayout::addComponent);

Links

• GitHub

Compatibility