VaadStrap: Designed to use bootstrap’s grid system in Vaadin applications to enable mobile-ready views without writing a single line of CSS.
The library is ready to be used by any Vaadin project and requires no widgetset compilation.
Usage example:
@Viewport("width=device-width, initial-scale=1") // this is necessary
public class BootstrapUI extends UI {
@Override
protected void init(VaadinRequest request) {
Container container = new Container();
setContent(container);
setSizeFull();
Row row = container.addNewRow();
Col col1 = row.addNewCol(ColMod.SM_6, ColMod.MD_4);
Col col2 = row.addNewCol(ColMod.SM_6, ColMod.MD_4, VisibilityMod.HIDDEN_XS);
col1.setChildrenStyle(MarginMod.TOP7);
col1.addComponent(new TextArea());
col1.addComponent(new TextArea());
col2.addComponent(new Text().append("This ").appendBold("column").append(" will be hidden in ").appendSmall("XS").append(" screens"));
col2.addComponent(new HorizontalLayout(new Button("Login", event -> Page.getCurrent().setLocation("/login")), new Button("New User")));
}
}
Container
has Row
(s).
Row
has Col
(s).
col-*-*
, col-*-offset-*
, col-*-push-*
, col-*-pull-*
, visible-*
, hidden-*
styles are available as enum constants. Look for ColMod
, ColOffsetMod
, ColPushPullMod
, VisibilityMod
, MarginMod
classes.
In the future the library may be extended to support more bootstrap features and components through AbstractJavaScriptComponent. PR’s are welcome.
Bootstrap version: 3.3.7