Board
Note
|
Commercial feature
A commercial Vaadin subscription is required to use Board in your project. |
Board is a powerful and easy to use layout element for building responsive views. It reorders the components inside it on different screen sizes while maximising the use of available space.
new tab
Board board = new Board();
board.addRow(
new ExampleIndicator("Current users", "745", "+33.7"),
new ExampleIndicator("View events", "54.6k", "-112.45"),
new ExampleIndicator("Conversion rate", "18%", "+3.9"),
new ExampleIndicator("Custom metric", "-123.45")
);
board.addRow(new ExampleChart());
Use Board to create responsive views and dashboards that work on any screen size.
Responsive
Board is responsive by default meaning it doesn’t require any custom development. Its layout is automatically optimized and adjusted based on the screen size, ensuring the components utilise all available space.
Rows & Columns
Board is made up of rows. Each row supports up to four columns and can contain up to four components.
Nested Rows
Rows can be nested for more fine grained control of how certain areas of the layout behave on resize and how they are rendered.
new tab
Row rootRow = new Row();
rootRow.add(new ExampleStatistics(), 2);
Row nestedRow = new Row(
new ExampleIndicator("Current users", "745", "+33.7"),
new ExampleIndicator("Conversion rate", "18%", "+3.9")
);
rootRow.addNestedRow(nestedRow);
Board board = new Board();
board.add(rootRow);
Column Wrapping
Columns automatically wrap onto new lines as the viewport narrows. The wrapping behaviour for a row with four columns and four components is shown below.
Important
| Use the draggable split handle to resize the layout and see how the columns wrap. |
new tab
Board board = new Board();
board.addRow(
createCell("Cell 1"),
createCell("Cell 2"),
createCell("Cell 3"),
createCell("Cell 4")
);
SplitLayout splitLayout = new SplitLayout(board, new Div());
Column Span
By default, components in a row shares the space equally. A component can stretch across two or three columns by setting its column span.
The possible combinations are shown below:
new tab
Board board1 = createBoard1();
Board board2 = createBoard2();
Board board3 = createBoard3();
...
private static Board createBoard1() {
Row row1 = new Row();
row1.add(createCell("Span 2"), 2);
row1.add(createCell("Span 1"));
row1.add(createCell("Span 1"));
Row row2 = new Row();
row2.add(createCell("Span 1"));
row2.add(createCell("Span 2"), 2);
row2.add(createCell("Span 1"));
Row row3 = new Row();
row3.add(createCell("Span 1"));
row3.add(createCell("Span 1"));
row3.add(createCell("Span 2"), 2);
Board board = new Board();
board.add(row1, row2, row3);
return board;
}
private static Board createBoard2() {
Row row1 = new Row();
row1.add(createCell("Span 3"), 3);
row1.add(createCell("Span 1"));
Row row2 = new Row();
row2.add(createCell("Span 1"));
row2.add(createCell("Span 3"), 3);
Board board = new Board();
board.add(row1, row2);
return board;
}
private static Board createBoard3() {
Row row1 = new Row();
row1.add(createCell("Span 2"), 2);
row1.add(createCell("Span 1"));
Row row2 = new Row();
row2.add(createCell("Span 1"));
row2.add(createCell("Span 2"), 2);
Board board = new Board();
board.add(row1, row2);
return board;
}
Breakpoints
Board adjusts its layout based on the viewport width. The following three viewport widths, called breakpoints, trigger a layout change:
Breakpoint | Viewport width | Max number of columns |
---|---|---|
large | ≥ 960 pixels | 4 |
medium | 600–959 pixels | 2 or 3[1] |
small | < 600 pixels | 1 |
The breakpoints can be customized by overriding the CSS custom properties named --vaadin-board-width-small
and --vaadin-board-width-medium
.
Breakpoint-Specific Styling
You can apply different styles for each breakpoint, for example to change the font size and space between components.
Important
| Use the draggable split handle to resize the layout and see how the board styling changes on different breakpoints. |
new tab
Board board = new Board();
// styles are defined separately, check the board.css snippet
board.addRow(
createCell("Cell 1"),
createCell("Cell 2"),
createCell("Cell 3"),
createCell("Cell 4")
);
SplitLayout splitLayout = new SplitLayout(board, new Div());
45A8A464-023A-4ED8-B10D-326C852350DD