devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
95 lines (84 loc) • 5.41 kB
HTML
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: false, version: [8] } ">
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
<div class="layout-header">
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
data-options="dxCommandContainer : { id: 'win8-master-detail-toolbar' }">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
</div>
</div>
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
<div class="layout-toolbar-bottom win8" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } "></div>
</div>
</div>
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: false } ">
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
<div class="layout-header">
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
data-options="dxCommandContainer : { id: 'win10-appbar' }">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
</div>
</div>
</div>
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: true } ">
<div class="layout-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
<div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' }">
<div data-bind="text: title">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
</div>
</div>
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
<div class="layout-toolbar-bottom" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win10-phone-appbar' } "></div>
</div>
</div>
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'win', phone: true, version: [8] } ">
<div class="layout-frame">
<div class="layout-header" data-options="dxContentPlaceholder : { name: 'header' }">
<div data-bind="text: title">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' } ">
</div>
</div>
<div class="layout-footer" data-options="dxContentPlaceholder : { name: 'footer' }">
<div class="layout-toolbar-bottom win8" data-bind="dxToolbar: { items: [], renderAs: 'bottomToolbar' }" data-options="dxCommandContainer : { id: 'win8-phone-appbar' } "></div>
</div>
</div>
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'ios' } " >
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'ios-header-toolbar' }">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
</div>
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'ios-view-footer' } " ></div>
</div>
</div>
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'android' } " >
<div class="transition-frame" data-options="dxTransition: { name: 'main', animation: 'view-content-change' }">
<div class="layout-header">
<div data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }"
data-options="dxCommandContainer : { id: 'android-simple-toolbar' }">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
</div>
</div>
</div>
<div class="simple-layout" data-options="dxLayout : { name: 'simple', platform: 'generic' } " >
<div class="layout-header dx-toolbar-background" data-options="dxContentPlaceholder : { name: 'header', animation: 'view-header-toolbar' }">
<div data-bind="dxToolbar: { items: [ { text: title, location: 'center' } ] }" data-options="dxCommandContainer : { id: 'generic-header-toolbar' }">
</div>
</div>
<div class="layout-content" data-options="dxContentPlaceholder : { name: 'content', animation: 'view-content-change' }">
</div>
<div class="view-footer" data-options="dxContent : { targetPlaceholder: 'view-footer' } " >
<div class="view-toolbar-bottom" data-bind="dxToolbar: { visible: true }" data-options="dxCommandContainer : { id: 'generic-view-footer' } " ></div>
</div>
</div>