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 fixed` to keep the column at a fixed width or ``max to make the column take the maximum of the available space
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 fixed to keep the column at a fixed width or max to make the column take the maximum of the available space
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: {}.