undefined
undefined
VCC UI Spacer is deprecated
Read the documentation on its replacement, which should be used for any new development.
The spacer component creates a flexible space that expands along the major axis of its containing flex layout.
Under the hood, the spacer is simply a <div> with the flex-basis set to size relative to the baseline grid. This will allow you to create a space that will adapt vertically and horizontally in any flex-box layout.
The default space is 1x to the baseline grid. Eg. 8px if the theme baseline is 8px. Setting the size to 2 would make it 1px, set it to 0.5 would make it 4px. In accordance with the design system rules: The size must be a multiple of 0.5, we do not allow sizes like 0.3.
Basic Example
In a row
Adapt size based on viewport
You can specify a media query (or use one from the theme) to control the size of the spacer for different viewports.