Skip to main content

Spacer

Overview​

The Spacer component is a layout element designed to add adjustable space between components. It helps create consistent spacing and improves the overall visual structure of the UI. This document provides detailed information on the data and style properties you can use to customize the Spacer component's appearance and behavior.

Sample JSON​

Below is a sample JSON object demonstrating how to define a Spacer component with various data and style properties:

spacer.json
{
  "type": "spacer",
  "data": {
    "minLength": 10
  }
}

Data Properties​

The data properties define the content of the Spacer component. The following table lists the available data properties for the Spacer component:

PropertyTypeRequiredDescription
minLengthInttrueThe minimum length of the spacer.

minLength​

  • Type: Int (required)
  • Description: Specifies the minimum length of the space in logical pixels. This property determines how much space the spacer will take up, ensuring consistent spacing between components.

The Spacer component is useful for creating flexible and responsive layouts by adding adjustable spacing between UI elements. It ensures that the layout remains consistent and visually appealing across different screen sizes and resolutions.