DevExtreme Angular - Overview

The SlideOut widget is a classic slide-out menu paired with a view. An end user opens the menu by swiping away the view.

View Demo

The following code adds a primitive SlideOut to your page.

HTML
JavaScript
CSS
<div id="slideOutContainer"></div>
$(function () {
    $("#slideOutContainer").dxSlideOut({
        dataSource: ["SuperLCD 42", "SuperLED 42", "SuperLED 50",
                     "SuperLCD 55", "SuperLCD 70", "DesktopLCD 19",
                     "DesktopLCD 21", "DesktopLED 21"],
        onItemClick: function (e) {
            e.component.hideMenu();
        }
    });
});
#slideOutContainer {
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
    width: 100%;
}

Note that the dataSource option accepts an array of strings. An individual menu item will be generated for each of these strings. As an alternative, the dataSource option accepts an array of objects. In this case, each of these objects should posess the text field, otherwise the menu item for it will be unnamed.

JavaScript
var displays = [
    { text: "SuperLCD 42", price: "$1200" },
    { text: "SuperLED 42", price: "$1450" },
    { text: "SuperLED 50", price: "$1600" },
    { text: "SuperLCD 55", price: "$1350" },
    { text: "SuperLCD 70", price: "$4000" },
    { text: "DesktopLCD 19", price: "$160" },
    { text: "DesktopLCD 21", price: "$170" },
    { text: "DesktopLED 21", price: "$180" }
 ];

$(function () {
    $("#slideOutContainer").dxSlideOut({
        dataSource: displays,
        onItemClick: function (e) {
            e.component.hideMenu();
        }
    });
});
NOTE
The SlideOut contains the List widget in the slide-out menu. If you need to put another collection widget there, use the SlideOutView instead of the SlideOut.
See Also