Composite components

There are a few components available to structure the layout and wrap fields : sections, tabs, etc.

The default component used to render an object is a section.

The title of the section can be derived from the title attribute of the object or from layout.title. An empty or null title will make the section into a simple container for its children.

The attribute layout.option.titleDepth can be used to configure the title tag (h1, h2, etc). Its default value is 2 and it is incremented automatically when nesting sections.

You might want to organize your properties into sections without adding actual object containers in your data.

To do so you can define sections in the layout.children attribute of the parent node.

By default nested sections are rendered in a flat way, using the indent option you change that.

Only sections with a title are indented, other sections remain invisible.

Children of an object can be rendered into tabs using layout: {comp: 'tabs'} or the shorter `layout: 'tabs'.

Children of an object can be rendered into vertical tabs using layout: {comp: 'vertical-tabs'} or the shorter layout: 'vertical-tabs'.

Children of an object can be rendered into expansion panels using layout: {comp: 'expansion-panels'} or the shorter `layout: 'expansion-panels'.

An object can be rendered as a card using layout: {comp: 'cards'} or the shorter `layout: 'cards'.

You can organize your properties into multiple sorts of composite components without creating intermediate object levels in your schemas.

To do so you have to define objects inside the layout.children attribute.

The standard JSON Schema attribute readOnly can have multiple effect on children of a section depending on the readOnlyPropertiesMode option.