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 maximizing the use of available space.
new tab
<vaadin-board>
<vaadin-board-row>
<example-indicator current="745" change="+33.7" title="Current users"></example-indicator>
<example-indicator
current="54.6k"
change="-112.45"
title="View events"
></example-indicator>
<example-indicator
current="18%"
change="+3.9"
title="Conversion rate"
></example-indicator>
<example-indicator current="-123.45" title="Custom metric"></example-indicator>
</vaadin-board-row>
<vaadin-board-row>
<example-chart></example-chart>
</vaadin-board-row>
</vaadin-board>Use Board to create responsive views and dashboards that work on any screen size.
Responsive
Board is responsive by default, meaning that it doesn’t require any custom development. Its layout is automatically optimized and adjusted based on the screen size, ensuring that the components utilize 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 finer-grained control of how certain areas of the layout behave on resize, and how they are rendered.
new tab
<vaadin-board>
<vaadin-board-row>
<example-statistics board-cols="2"></example-statistics>
<vaadin-board-row board-cols="1">
<example-indicator
current="745"
change="+33.7"
title="Current users"
></example-indicator>
<example-indicator
current="18%"
change="+3.9"
title="Conversion rate"
></example-indicator>
</vaadin-board-row>
</vaadin-board-row>
</vaadin-board>Column Wrapping
Columns automatically wrap on to new lines as the viewport narrows. The wrapping behavior 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
<vaadin-split-layout>
<vaadin-board style="width: 100%">
<vaadin-board-row class="row">
<div class="cell color">Cell 1</div>
<div class="cell color">Cell 2</div>
<div class="cell color">Cell 3</div>
<div class="cell color">Cell 4</div>
</vaadin-board-row>
</vaadin-board>
<div></div>
</vaadin-split-layout>Column Span
By default, the components in a row share the space equally. A component can be made to stretch across two or three columns by setting its column span.
The possible combinations are shown below:
new tab
<vaadin-board>
<vaadin-board-row>
<div class="cell" board-cols="2">Span 2</div>
<div class="cell">Span 1</div>
<div class="cell">Span 1</div>
</vaadin-board-row>
<vaadin-board-row>
<div class="cell">Span 1</div>
<div class="cell" board-cols="2">Span 2</div>
<div class="cell">Span 1</div>
</vaadin-board-row>
<vaadin-board-row>
<div class="cell">Span 1</div>
<div class="cell">Span 1</div>
<div class="cell" board-cols="2">Span 2</div>
</vaadin-board-row>
</vaadin-board>
<vaadin-board>
<vaadin-board-row>
<div class="cell" board-cols="3">Span 3</div>
<div class="cell">Span 1</div>
</vaadin-board-row>
<vaadin-board-row>
<div class="cell">Span 1</div>
<div class="cell" board-cols="3">Span 3</div>
</vaadin-board-row>
</vaadin-board>
<vaadin-board>
<vaadin-board-row>
<div class="cell" board-cols="2">Span 2</div>
<div class="cell">Span 1</div>
</vaadin-board-row>
<vaadin-board-row>
<div class="cell">Span 1</div>
<div class="cell" board-cols="2">Span 2</div>
</vaadin-board-row>
</vaadin-board>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, 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 at different breakpoints. |
new tab
protected override render() {
return html`
<vaadin-split-layout>
<vaadin-board style="width: 100%">
<!-- styles are defined separately, check the board.css snippet -->
<vaadin-board-row>
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
</vaadin-board-row>
</vaadin-board>
<div></div>
</vaadin-split-layout>
`;
}C2E98F9B-DC19-4C1D-8538-843235BA8701