Board
Note
|
Commercial feature
A commercial Vaadin subscription is required to use Board in your project. |
The Board component reorders the components it contains for different screen sizes, while maximizing the use of available space. 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 that the components use all available space.
Rows & Columns
Breakpoints
Board adjusts its layout based on the layout container width. The following three container widths — called breakpoints — trigger a layout change:
Breakpoint | Container Width | Max Number of Columns |
---|---|---|
large | ≥ 960 pixels | 4 |
medium | 600–959 pixels | 2 or 3[1] |
small | < 600 pixels | 1 |
Breakpoints can be customized by overriding the CSS custom properties --vaadin-board-width-small
and --vaadin-board-width-medium
.
Breakpoint-Specific Styling
You can apply different styles for each breakpoint. You might do this, for example, to change the font size and space between components.
Important
| You can find more information in the corresponding article on vaadin.com. |