Layout¶
With the layout-hook the three-column-layout (navigation, content, sidebar) can be manipulated
Lets see an example:
layout: {
navigation: {
collapsed: true
},
content: {
width: 'fixed',
topSpace: false,
leftSpace: false,
rightSpace: true
},
sidebar: {
width: 'max',
url: '/admin/widget-groups/my-widget-group'
}
}
This layout-property just needs to be placed in the return block of the javascript-component and the AdminBundle does the rest.
List of all available options:¶
Parameter |
Type |
Description |
---|---|---|
navigation |
Object |
contains properties affecting the navigation-column |
navigation.collapsed |
Boolean |
If true the navigation transitions to collapsed state |
navigation.hidden |
Boolean |
If true the navigation gets hidden |
content |
Object |
contains properties affecting the content-column |
content.width |
String |
|
content.leftSpace |
Boolean |
If false the content-column has no padding on the left |
content.rightSpace |
Boolean |
If false the content-column has no padding on the right |
content.topSpace |
Boolean |
If false the content-column has no padding on the top |
sidebar’ |
Object|Boolean |
Contains properties affecting the sidebar-column. If false the sidebar gets hidden. |
sidebar.width |
String |
|
sidebar.url |
String |
Url from which markup gets fetched and placed inside the sidebar |
extendExisting |
Boolean |
If true the passed configurations for navigation, column and sidebar won’t be merged with the defaults. So the existing layout stays the same and only the explicitly passed properties take effect. |
Note
Either the sidebar-column or the content-column must have a fixed
width. If the width
of both columns is of type max
the behaviour is not specified.
The defaults of the layout-hook are:
layout: {
extendExisting: false,
navigation: {
collapsed: false,
hidden: false
},
content: {
width: 'fixed',
leftSpace: true,
rightSpace: true,
topSpace: true
},
sidebar: false
}
To get the default layout just write layout: {}
.