Outer Layouts

Outer layouts are used to wrap the content being rendered into a frame, e.g. to add a header and a footer. This is very convenient for defining global application layouts and should not be confused with Inner Layouts.

An outer layout is a simple widget tree which uses the ContentPlaceholder widget to specify content insertion points. The layout can be assigned to any widget using the outerLayout attribute (please see the example below).

ContentPlaceholder

import {ContentPlaceholder} from 'cx/ui';

ContentPlaceholder elements are used to specify content insertion points inside outer layouts. If multiple placeholders are needed, you should assign each content placeholder a different name. Name body is reserved for the place where the actual widget will be rendered.

Content

import {Content} from 'cx/ui';

The Content widget is used to define contents that will be plugged into placeholders. Use for or name to specify in which placeholder contents will go.

The following example shows the basic usage of outer layouts implemented using inline styles and flex based CSS layouts.

App Header

Main 1

App Header

Main 2

Layout Widget

<div outerLayout={AppLayout}>
    <Content for="sidebar">
        Nav 1
    </Content>
    Main 1
</div>

<div outerLayout={AppLayout}>
    <Content for="sidebar">
        Nav 2
    </Content>
    Main 2
</div>

Copied!Cx Fiddle

Instead of using the Content widget, alternatively, you can define putInto or contentFor attribute for any Cx widget or HTML element to specify the name of the content placeholder that should render it.

<div outerLayout={AppLayout}>
    <div putInto="sidebar">
       Nav 3
    </div>
    Main 3
</div>

When using outer layouts, the content is rendered inside out. A layout can contain other layouts, which enables better code reuse.