ContentPlaceholder

An object used to define markup options for a content placeholder.

Type: Object

When rendering an application, all content elements of the view are placed in the appropriate content placeholder elements of the layout. The placeholder is identified by name, which is specified by the name configuration option.

The following example illustrates how to create a layout containing two content placeholders ("content" and "footer").

HTML
<div class="my-layout" data-options="dxLayout: { name: 'default', platform: 'ios' }" id="page">
    <div id="wrapper">
        <div class="layout-header" data-bind="dxToolbar: { dataSource: toolbarData }"></div>
        <div class="layout-content" data-options="dxContentPlaceholder: { name: 'content', transition: 'slide' }"></div>
    </div>
    <div class="layout-footer" data-options="dxContentPlaceholder: { name: 'footer', transition: 'overflow' }"></div>
</div>

The example below displays a view with corresponding content elements.

HTML
<div data-options="dxView: { name: 'mainView', title: 'Home' }">
    <div data-options="dxContent: { targetPlaceholder: 'content' }">
        <div class="buttonContainer" data-bind="dxButton: { text: 'Click me', clickAction: buttonClicked }"></div>
        <div class="mapsContainer" data-bind="dxMap: { location: 'Brooklyn Bridge,New York,NY', zoom: 10 }"></div>
    </div>
    <div data-options="dxContent: { targetPlaceholder: 'footer' }">
        <span data-bind="text: footerText"></span>
    </div>
</div>

Configuration

This section describes configuration options used to create a content placeholder.