Directory

← Back

FlexLayout Add-on

Java API for CSS Flexbox

Author

Rating

Popularity

100+

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);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2018-01-26
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Browser
Firefox
Safari
Google Chrome
Android Browser
Internet Explorer
Microsoft Edge

FlexLayout Add-on - Vaadin Add-on Directory

Java API for CSS Flexbox FlexLayout Add-on - Vaadin Add-on Directory
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.
GitHub

FlexLayout Add-on version 0.1.0

Online