...
| $type | class |
|---|
declarativeLayout
| info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition
|
defaultEditorActionLayout | info.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition |
form
| info.magnolia.ui.framework.layout.FormLayoutDefinition
|
horizontal
| info.magnolia.ui.framework.layout.HorizontalLayoutDefinition |
stacked | info.magnolia.ui.framework.layout.StackedLayoutProducer |
tabbedLayout
| info.magnolia.ui.framework.layout.TabbedLayoutDefinition
|
Default layout
With the default layout
| Javadoc resource link |
|---|
| className | info.magnolia.ui.framework.layout.FormLayoutDefinition |
|---|
| renderType | asynchronous |
|---|
|
, it is not possible to configure anything. Use this layout when there is no need for customization.
From Magnolia 6.2.1, FormLayoutDefinition has replaced the deprecated PlainFormLayoutDefinition as the default layout.
Tabbed layout
With the tabbed layout
| Javadoc resource link |
|---|
| className | info.magnolia.ui.framework.layout.TabbedLayoutDefinition |
|---|
| renderType | asynchronous |
|---|
|
, you can organize components into tabs.
| Code Block |
|---|
| language | yml |
|---|
| title | Example tabbed layout definition |
|---|
| collapse | true |
|---|
|
layout:
$type: tabbedLayout
tabs:
personal:
fields:
- name: salutation
- name: firstName
- name: lastName
details:
fields:
- name: email
- name: phone |
Horizontal layout
With the horizontal layout
| Javadoc resource link |
|---|
| className | info.magnolia.ui.framework.layout.HorizontalLayoutDefinition |
|---|
| renderType | asynchronous |
|---|
|
, you can arrange components horizontally. To disable spacing between components, set the
spacing property to
false.
| Code Block |
|---|
| language | yml |
|---|
| title | Example horizontal layout definition |
|---|
| collapse | true |
|---|
|
layout:
$type: horizontal
fields:
- name: salutation
label: Salutation
$type: textField
- name: firstName
$type: textField
label: First name
- name: lastName
$type: textField
label: Last name |
Stacked layout
With the stacked layout
| Javadoc resource link |
|---|
| className | info.magnolia.ui.framework.layout.StackedLayoutProducer |
|---|
| renderType | asynchronous |
|---|
|
, you can arrange components vertically. Any captions are placed above the respective components, which means that more horizontal space is allocated to the components themselves. This is the default layout for composite fields.
| Code Block |
|---|
| language | yml |
|---|
| title | Example stacked layout definition |
|---|
| collapse | true |
|---|
|
layout:
$type: stacked
fields:
- name: salutation
label: Salutation
$type: textField
- name: firstName
$type: textField
label: First name
- name: lastName
$type: textField
label: Last name |
Declarative layout
With the declarative layout
| Javadoc resource link |
|---|
| className | info.magnolia.ui.framework.layout.DeclarativeLayoutDefinition |
|---|
| renderType | asynchronous |
|---|
|
, you can create form entries in an arbitrary Vaadin component container using the
Vaadin declarative syntax. Use this layout for full customization.
...
| Info |
|---|
If VerticalLayout.java is stored in src/main/java/info/magnolia/contacts/layout, my-style.css should be added to src/main/resources/info/magnolia/contacts/layout. |
Action layout
With the action layout
| Javadoc resource link |
|---|
| className | info.magnolia.ui.dialog.layout.DefaultEditorActionLayoutDefinition |
|---|
| renderType | asynchronous |
|---|
|
, you can define an action area in dialogs and the detail subapps of content apps. This is the default layout for footers and includes predefined primary and secondary actions.
...