Docs

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Docs

Basic Use

The vaadin-board is a regular web component, which you can add to a web page. Vaadin Board is using Polymer 2.

Install

You can use Bower to install Vaadin Board dependency by running the following command inside your project folder:

$ bower install --save vaadin-board

Replace the version number with the most current one.

Add html import:

<!DOCTYPE html>
<html>
<head>
  <link rel="import" href="bower_components/vaadin-board/vaadin-board.html">
</head>
</html>

Installing a License Key

You need to install a license key in order to develop your application with Vaadin Board web component.

You can purchase Vaadin Board or obtain a free trial key from the Vaadin Licenses page. You need to register in the Vaadin website to obtain the key.

When you first time open the web page with Vaadin Board, you will see a pop-up that asks you to enter the license key. If the license is valid, it will be saved to the local storage of the browser and you will not see the pop-up again. The license dialog will only be shown in development environment when accessing the web page using localhost or 127.0.0.1.

Basic Configuration

vaadin-board is divided into rows, using vaadin-board-row. Rows are divided into columns. You can put any WebComponent or HTML element inside the vaadin-board-row. Every element inside the row can take from one to four columns. Based on available space, the vaadin board rearranges child elements based on available space. In the example below every child div will use 33% on Desktop, but will be rearranged to two rows when switching to tablet: one row with 2 items 50% of available space each and second row with 100% width item, see example below.

<vaadin-board>
  <vaadin-board-row>
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
  </vaadin-board-row>
</vaadin-board>

We can add styling to our content. Insert the following CSS , inside the style tag:

.item {
    display: block;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    border-style: solid;
    border-width: 3px;
    border-color: #fff;
    text-align: center;
    background-color: #cacaca;
    height:200px;
}
board basic use
Vaadin Board Basic Configuration

You can use board-cols to specify the width of the inner element in columns:

<vaadin-board>
  <vaadin-board-row>
        <div class="item" board-cols="3">1</div>
        <div class="item">2</div>
  </vaadin-board-row>
</vaadin-board>
board basic use board cols
Configure Row Width
Note
 Elements inside a row will have overflow set to hidden by default, it can be overriden.

Nested Rows

Vaadin Board allows to have nested rows. Nested rows are responsive in relation to the parent slot size.

<vaadin-board>
   <vaadin-board-row>
     <div class="item" board-cols="3">1</div>
     <vaadin-board-row>
         <div class="item">2</div>
         <div class="item">3</div>
         <div class="item">4</div>
     </vaadin-board-row>
   </vaadin-board-row>
</vaadin-board>
board basic use nested
Nested Rows

Styling

Vaadin Board rearranges elements in your layout based on available space. In some cases you want to use different styles depending on how the elements are laid out, e.g. use smaller font size for mobile devices. Vaadin Board has three predefined class selectors for vaadin-board-row:

  • small - for rows smaller than 600 pixels.

  • middle - for rows between 600 and 969 pixels.

  • large - for rows bigger than 960 pixels.

<vaadin-board>
  <vaadin-board-row>
      <div>top A</div>
      <div>top B</div>
      <div>top C</div>
      <div>top C</div>
  </vaadin-board-row>
</vaadin-board>
.large {
    font-size:20px;
}
.medium {
    font-size:16px;
}
.small {
    font-size:10px;
}

Redraw method

Vaadin Board relies on resize events to achieve responsiveness. In some cases the board size might change without a resize event, for instance if a fixed size is set in its style, for such cases the redraw method of the vaadin-board element should be used.

Internet Explorer 11 & Safari 9 support

Vaadin Board is using Polymer 2 and ES6. To support IE11 and Safari 9 you need to transpile ES6 to ES5. The easiest way to do that, is using Polymer CLI. Add a build configuration to your polymer.json:

  "builds": [{
    "name": "my-app",
    "js": {"minify": true, "compile": true},
    "css": {"minify": true},
    "html": {"minify": true}
  }]

Running polymer build in you application folder will create a transpiled version of your application. Your application will be transpiled and saved in build folder.

Another option to transpile ES6 to ES5 is to use Babel.

Known Issues

  • Because non-chrome browsers need to load a polyfill, you can see flickering, before definition of the web component comes in. You can suspend rendering the component before it is ready by adding the unresolved attribute in body:

  <body unresolved>
   //Your code here
  </body>

  • Because Vaadin Board uses flexbox, there is a limited support for IE11. If you want to have a border for the direct child of the vaadin-board-row you need to create a wrapper div and add a border there, but not to the direct child of the vaadin-board-row. The description of the bug can be found here.

  • There is a memory leak problem with Internet Explorer 11 and Polymer 2, see details here.