Directory

← Back

VaadStrap

Bootstrap Grid System for Vaadin

Author

Rating

Popularity

<100

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

Sample code

@Viewport("width=device-width, initial-scale=1")
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")));
	}
}
package com.sebworks;

import com.sebworks.vaadstrap.*;
import com.vaadin.annotations.Viewport;
import com.vaadin.server.FontAwesome;
import com.vaadin.server.VaadinRequest;
import com.vaadin.spring.annotation.SpringUI;
import com.vaadin.ui.Button;
import com.vaadin.ui.PasswordField;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.themes.ValoTheme;
import org.springframework.stereotype.Component;

/**
 * Demo Login UI for vaadstrap
 * Created by bekce on 3/16/17.
 */
@SpringUI(path = "login")
@Component
@Viewport("width=device-width, initial-scale=1")
public class LoginUI extends UI {

	@Override
	protected void init(VaadinRequest request) {
		Container container = new Container();
		setContent(container);
		setSizeFull();

		TextField emailField = new TextField();
		emailField.setPlaceholder("Email");
		PasswordField passwordField = new PasswordField();
		passwordField.setPlaceholder("Password");
		Button loginButton = new Button("Login", FontAwesome.KEY);
		loginButton.setStyleName(ValoTheme.BUTTON_FRIENDLY);

		// add header
		container.addNewRow().addComponent(new Text().appendH2("Please sign in"));

		// add components
		container.addRow(
				new Row()
						.addCol(new Col(12, 4).addStyles(MarginMod.TOP7).add(emailField))
						.addCol(new Col(12, 4).addStyles(MarginMod.TOP7).add(passwordField))
						.addCol(new Col(12, 4).addStyles(MarginMod.TOP7).add(loginButton))
		);

	}
}

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

  • Vaadin 8 support!
  • Improved builder API for Container, Row and Col classes
  • New Text and TextMod support for creating HTML5 text
  • Upgraded to Bootstrap 3.3.7 and removed unnecessary JS dependencies
  • Added login page example
Released
2017-03-16
Maturity
EXPERIMENTAL
License
MIT License

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.0+ in 0.1.2
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone
Microsoft Edge

VaadStrap - Vaadin Add-on Directory

Bootstrap Grid System for Vaadin VaadStrap - Vaadin Add-on Directory
Designed to use [bootstrap's grid system](http://getbootstrap.com/css/#grid) 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
Online