Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Theming: Whitespace

Properties

Whitespace can be applied using three different properties: Margin, Padding and Spacing.

If you use HorizontalLayout or VerticalLayout you can use setMargin(true), setPadding(true) and setSpacing(true).

However, these methods aren’t available for Div, FlexLayout or any other container. The Business App Starter enables you to apply margin, padding and spacing on any Component using class names.

Sizes

There are five different sizes: XS, S, M (default), L and XL.

Directions

And nine different directions: BOTTOM, LEFT, RIGHT, TOP, HORIZONTAL, VERTICAL, TALL, UNIFORM (default) and WIDE.

Example

Use the following formula to apply margin, padding, or spacing: component.addClassName(LumoStyles.<PROPERTY>.<DIRECTION>.<SIZE>).

Example 1

component.addClassName(LumoStyles.Padding.Uniform.M);

Example 2

Apply multiple styles at once using addClassNames:

component.addClassNames(
  LumoStyles.Margin.Horizontal.XL
  LumoStyles.Padding.Vertical.XL,
  LumoStyles.Spacing.Bottom.M
);

Cheatsheet

Horizontal

Horizontal is shorthand for applying margin, padding and spacing on the left and right.

horizontal

Margin

addClassName(LumoStyles.Margin.Horizontal.XS);
addClassName(LumoStyles.Margin.Horizontal.S);
addClassName(LumoStyles.Margin.Horizontal.M);
addClassName(LumoStyles.Margin.Horizontal.L);
addClassName(LumoStyles.Margin.Horizontal.XL);

Padding

addClassName(LumoStyles.Padding.Horizontal.XS);
addClassName(LumoStyles.Padding.Horizontal.S);
addClassName(LumoStyles.Padding.Horizontal.M);
addClassName(LumoStyles.Padding.Horizontal.L);
addClassName(LumoStyles.Padding.Horizontal.XL);

Spacing

addClassName(LumoStyles.Spacing.Horizontal.XS);
addClassName(LumoStyles.Spacing.Horizontal.S);
addClassName(LumoStyles.Spacing.Horizontal.M);
addClassName(LumoStyles.Spacing.Horizontal.L);
addClassName(LumoStyles.Spacing.Horizontal.XL);

Vertical

Vertical is shorthand for applying margin, padding and spacing on the bottom and top.

vertical

Margin

addClassName(LumoStyles.Margin.Vertical.XS);
addClassName(LumoStyles.Margin.Vertical.S);
addClassName(LumoStyles.Margin.Vertical.M);
addClassName(LumoStyles.Margin.Vertical.L);
addClassName(LumoStyles.Margin.Vertical.XL);

Padding

addClassName(LumoStyles.Padding.Vertical.XS);
addClassName(LumoStyles.Padding.Vertical.S);
addClassName(LumoStyles.Padding.Vertical.M);
addClassName(LumoStyles.Padding.Vertical.L);
addClassName(LumoStyles.Padding.Vertical.XL);

Spacing

addClassName(LumoStyles.Spacing.Vertical.XS);
addClassName(LumoStyles.Spacing.Vertical.S);
addClassName(LumoStyles.Spacing.Vertical.M);
addClassName(LumoStyles.Spacing.Vertical.L);
addClassName(LumoStyles.Spacing.Vertical.XL);

Tall

Margin, padding or spacing that has bigger vertical space than horizontal space.

tall

Margin

addClassName(LumoStyles.Margin.Tall.XS);
addClassName(LumoStyles.Margin.Tall.S);
addClassName(LumoStyles.Margin.Tall.M);
addClassName(LumoStyles.Margin.Tall.L);
addClassName(LumoStyles.Margin.Tall.XL);

Padding

addClassName(LumoStyles.Padding.Tall.XS);
addClassName(LumoStyles.Padding.Tall.S);
addClassName(LumoStyles.Padding.Tall.M);
addClassName(LumoStyles.Padding.Tall.L);
addClassName(LumoStyles.Padding.Tall.XL);

Spacing

addClassName(LumoStyles.Spacing.Tall.XS);
addClassName(LumoStyles.Spacing.Tall.S);
addClassName(LumoStyles.Spacing.Tall.M);
addClassName(LumoStyles.Spacing.Tall.L);
addClassName(LumoStyles.Spacing.Tall.XL);

Uniform

An equal amount of margin, padding and spacing in all directions.

uniform

Margin

addClassName(LumoStyles.Margin.Uniform.XS);
addClassName(LumoStyles.Margin.Uniform.S);
addClassName(LumoStyles.Margin.Uniform.M);
addClassName(LumoStyles.Margin.Uniform.L);
addClassName(LumoStyles.Margin.Uniform.XL);

Padding

addClassName(LumoStyles.Padding.Uniform.XS);
addClassName(LumoStyles.Padding.Uniform.S);
addClassName(LumoStyles.Padding.Uniform.M);
addClassName(LumoStyles.Padding.Uniform.L);
addClassName(LumoStyles.Padding.Uniform.XL);

Spacing

addClassName(LumoStyles.Spacing.Uniform.XS);
addClassName(LumoStyles.Spacing.Uniform.S);
addClassName(LumoStyles.Spacing.Uniform.M);
addClassName(LumoStyles.Spacing.Uniform.L);
addClassName(LumoStyles.Spacing.Uniform.XL);

Wide

Margin, padding or spacing that has bigger horizontal space than vertical space.

wide

Margin

addClassName(LumoStyles.Margin.Wide.XS);
addClassName(LumoStyles.Margin.Wide.S);
addClassName(LumoStyles.Margin.Wide.M);
addClassName(LumoStyles.Margin.Wide.L);
addClassName(LumoStyles.Margin.Wide.XL);

Padding

addClassName(LumoStyles.Padding.Wide.XS);
addClassName(LumoStyles.Padding.Wide.S);
addClassName(LumoStyles.Padding.Wide.M);
addClassName(LumoStyles.Padding.Wide.L);
addClassName(LumoStyles.Padding.Wide.XL);

Spacing

addClassName(LumoStyles.Spacing.Wide.XS);
addClassName(LumoStyles.Spacing.Wide.S);
addClassName(LumoStyles.Spacing.Wide.M);
addClassName(LumoStyles.Spacing.Wide.L);
addClassName(LumoStyles.Spacing.Wide.XL);

C1A4360D-9EE2-4007-BA56-579D6A032D40