devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
62 lines (46 loc) • 1.94 kB
HTML
<div class="master-detail-layout" data-options="dxLayout : { name: 'split', tablet: true, platform: 'ios' }">
<div class="master-pane dx-splitter">
</div>
<div class="detail-pane">
</div>
</div>
<div class="master-detail-layout" data-options="dxLayout : { name: 'split', tablet: true, platform: 'android' }">
<div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, align: 'center' }] }" data-options="dxCommandContainer : { id: 'android-simple-toolbar' }" >
</div>
<div class="main-area">
<div class="master-pane dx-splitter">
</div>
<div class="detail-pane">
</div>
</div>
</div>
<div class="split-layout" data-options="dxLayout : { name: 'split', platform: 'win', phone: false, version: [8] } " >
<div class="layout-header">
<div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }" data-options="dxCommandContainer : { id: 'win8-master-detail-toolbar' }" >
</div>
</div>
<div class="left-content">
</div>
<div class="right-content">
</div>
<div class="dx-app-bar">
<div class="footer-toolbar" data-bind="dxToolbar: { }" data-options="dxCommandContainer : { id: 'win8-appbar' }">
</div>
</div>
</div>
<div class="split-layout" data-options="dxLayout : { name: 'split', platform: 'win', phone: false } ">
<div class="layout-header">
<div class="header-toolbar" data-bind="dxToolbar: { items: [{ text: title, location: 'center' }] }" data-options="dxCommandContainer : { id: 'win10-appbar' }">
</div>
</div>
<div class="left-content">
</div>
<div class="right-content">
</div>
</div>
<div class="master-detail-layout" data-options="dxLayout : { name: 'split', tablet: true, platform: 'generic' }">
<div class="master-pane dx-splitter">
</div>
<div class="detail-pane">
</div>
</div>