VerticalLayout

VerticalLayout is a convenience layout for arranging components vertically.

It provides the same general layout and cell configuration as BasicLayout, but always uses a vertical direction.

Example

The following example arranges three cells vertically, using different background colors, padding and spacing.

VerticalLayout layout = new VerticalLayout();
layout.setRelativeWidth(100);
layout.setGap(6);

layout.add(new Text("First"))
        .setPadding(8)
        .setBgColor(new Color("#DCEEFF"));

layout.add(new Text("Second"))
        .setPadding(8)
        .setBgColor(new Color("#E4F5E9"));

layout.add(new Text("Third"))
        .setPadding(8)
        .setBgColor(new Color("#F5E5F8"));

Constructor

Usage

VerticalLayout is useful when components should be stacked from top to bottom, such as page sections, forms, menus and groups of information.

Components are added vertically using the add() method.

The setGap() method controls the spacing between cells, while each cell can have its own padding, background color, alignment and size.

VerticalLayout can also contain HorizontalLayout components, making it easy to combine horizontal and vertical arrangements.

BasicLayout API

VerticalLayout exposes the same general sizing, spacing, border, background, shadow, alignment, overflow and cell configuration used by BasicLayout.

See the BasicLayout documentation for the complete layout API.

The main difference is that VerticalLayout already uses a vertical direction, so there is no need to create it with BasicLayout.Direction.VERTICAL.