Angular SlideOutView - Overview
The SlideOutView UI component is a classic slide-out menu paired with a view. This UI component is very similar to the SlideOut with only one difference - the SlideOut always contains the List in the slide-out menu, while the SlideOutView can hold any collection there.
The following code adds the SlideOutView UI component to your page. The view contains a Toolbar and a Chart; the slide-out menu contains a TreeView. This example is expanded further in the Customize the View and Customize the Menu articles.
<div id="slideOutView"> <div data-options="dxTemplate: { name: 'content' }"> <div id="toolbar"></div> <div id="chart"></div> </div> <div data-options="dxTemplate: { name: 'treeView' }"> <div id="treeView"></div> </div> </div>
$(function() { var slideOutView = $("#slideOutView").dxSlideOutView({ menuTemplate: 'treeView', contentTemplate: 'content' }).dxSlideOutView("instance"); var toolbar = $("#toolbar").dxToolbar({ // Toolbar is configured in the "Customize the View" article }).dxToolbar("instance"); var chart = $("#chart").dxChart({ // Chart is configured in the "Customize the View" article }).dxChart("instance"); $("#treeView").dxTreeView({ // TreeView is configured in the "Customize the Menu" article }); });
#slideOutView { height: auto; position: absolute; top: 0; bottom: 0; width: 100%; }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.