Standard Definitions for Layouts

Specify the layout of a complex property type by using standard layout definitions. A layout is made up of one or more layout definitions.

These are the standard layout definitions.

  • lightning/verticalLayout
  • lightning/tabSetLayout
  • lightning/accordionLayout

Each layout definition can contain a lightning/propertyLayout definition to specify where in the property sheet the property editor is expected to appear. The layout definition takes a required attribute called "property," whose value is a reference to a sub-property in the schema. The property editor that's rendered is based on the lightning:type that the sub-property references and whether the sub-property is overridden by the componentOverrides.

To arrange your property sheet in a flat list, use the lightning/verticalLayout definition. In this case, the properties appear in the order in which you define them in the schema. This layout can take only lightning/propertyLayout definitions as children.

Here's a code snippet of a layout with properties for borderStyle, borderWeight, borderRadius, layoutHeight, and layoutWidth arranged in vertical order.

Here's how the layout looks in the component property panel in Experience Builder.

Vertical layout in component property panel

To arrange your property sheet in accordion sections, use the lightning/accordionLayout definition. This layout definition can take only lightning/accordionSectionLayout definitions as children. The lightning/accordionSectionLayout definition, in turn, can use only lightning/propertyLayout definitions as children.

Here's an example of the properties for borderStyle, borderWeight, borderRadius, layoutHeight, and layoutWidth laid out in accordion sections for Borders and Size.

Here's how the accordion layout looks in the component property panel in Experience Builder.

Accordion layout for Borders and Size in component property panel

To arrange your property sheet in tabs, use the lightning/tabSetLayout definition. This layout definition can take only lightning/tabLayout definitions as children. The lightning/tabLayout definition, in turn, can take only lightning/propertyLayout definitions as children.

Here's an example of the properties borderStyle, borderWeight, borderRadius, layoutHeight, and layoutWidth laid out on tabs for Borders and Size.

Here's how the tabset layout looks in the component property panel in Experience Builder.

Tabset layout for Borders and Size in component property panel

See Also