FlexLayout Add-on
Java API for CSS Flexbox
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
Compatibility
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 FlexboxFlexLayout 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