Vue SlideOut - Overview

The SlideOut UI component 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 property accepts an array of strings. An individual menu item will be generated for each of these strings. As an alternative, the dataSource property 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 UI component in the slide-out menu. If you need to put another collection UI component there, use the SlideOutView instead of the SlideOut.

Vue SlideOut - Overview

See Also