Directory

GridLayout

Addon that recreates some of the functionalities of Vaadin 7 Grid Layout component for Vaadin Flow

View larger

Close

Grid Layout component provides support to the following features:

• Creating a GridLayout with predefined number of columns & rows
• Setting spacing & margin
• Adding components

Sample code

    GridLayout grid = new GridLayout(4, 4);
    grid.setMargin(true);
    
    // Need to define width & height for the layout.
    grid.setWidth("406px");
    grid.setHeight("353px");   

    // Fill out the first row using the cursor.
    Button brc1 = new Button("R/C 1");
    brc1.setWidth("100%");
    grid.addComponent(brc1);

    for (int i = 0; i < 3; i++) {
        int col = grid.getCursorX() + 1;
        Button b  = new Button("Col " + col);
        b.setWidth("100%");
        grid.addComponent(b);
    }

    // Fill out the first column using coordinates.
    for (int i = 1; i < 4; i++) {
        Button b = new Button("Row " + i);
        b.setHeight("100%");
        grid.addComponent(b, 0, i);
    }

    // Add some components of various shapes.
    Button b = new Button("3x1 button");
    b.setWidth("100%");
    grid.addComponent(b, 1, 1, 3, 1);
    grid.addComponent(new Label("1x2 cell"), 1, 2, 1, 3);
    Div div = new Div();
    div.setText("A 2x2 div field");
    div.setWidth("252px");
    div.setHeight("248px");
    grid.addComponent(div, 2, 2, 3, 3);

Links

• Online Demo
• Issue tracker
• View on GitHub
• Author Homepage

Compatibility