The dxLayout markup component allows you to introduce a custom layout HTML template. To indicate a particular markup as a layout, wrap this markup by a div element and set the element's data-options attribute to dxLayout. Set a name for the layout using the name option of the dxLayout component.

<div class="my-layout" data-options="dxLayout: { name:'default' }">
    <div class="layout-header" data-bind="dxToolbar: { dataSource:toolbarData }"></div>
    <div class="layout-content" data-options="dxContentPlaceholder: { name:'content', animation:'slide' }"></div>
    <div class="layout-footer" data-options="dxContentPlaceholder: { name:'footer', animation:'overflow' }"></div>
</div>

You can define a layout for a specific device only (e.g. iPhone). For this purpose, specify dxLayout options with the same names as the fields of the device object.

To render the layout markup and fill it with missing content (merge it with the view markup and add commands to command containers), a layout controller must be created. In addition, a layout markup can be accompanied by style sheets (CSS). For more information about layouts, refer to the Define Layouts help article.