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.
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>)
.
Cheatsheet
Horizontal
Horizontal is shorthand for applying margin, padding and spacing on the left and right.
![horizontal](/docs/v14/static/9ddfc1ebe6f288e45ad7fe3a26d497ae/a839c/horizontal.png)
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);
Vertical
Vertical is shorthand for applying margin, padding and spacing on the bottom and top.
![vertical](/docs/v14/static/73fde9d2c78ac18a3d5eed95bc51f3a6/636d2/vertical.png)
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);
Tall
Margin, padding or spacing that has bigger vertical space than horizontal space.
![tall](/docs/v14/static/370c48b4aa71ad2952dbb66235b6ec15/64b9e/tall.png)
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);
Uniform
An equal amount of margin, padding and spacing in all directions.
![uniform](/docs/v14/static/50cd900b8d3ed750d1d00ccd46f336c1/64e1f/uniform.png)
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);
Wide
Margin, padding or spacing that has bigger horizontal space than vertical space.
![wide](/docs/v14/static/14bd0e04a11d58566b200a447f2d6f32/2a307/wide.png)
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);