Overview - DevExtreme Slideout: Vue Components by DevExpress

$(function(){ function showMenu() { slideOut.option("menuVisible", !slideOut.option("menuVisible")); } var slideOut = $("#slideout").dxSlideOut({ dataSource: products, onItemClick: showMenu, menuVisible: true, swipeEnabled: true, menuGrouped: true, itemTemplate: function(itemData, itemIndex, itemElement) { $("<div/>") .appendTo(itemElement) .dxToolbar({ dataSource: [{ location: "before", widget: "dxButton", options: { icon: "menu", onClick: showMenu } }, { location: "center", template: function(e) { return "<p>" + itemData.text + "</p>"; } }] }); var $infoContainer = $("<div />").attr("id", "info"); $infoContainer.append( $("<img />").attr("src", itemData.src), $("<h1 />").text(itemData.price) ); var $fieldSetContainer = $("<div />").addClass("dx-fieldset"); $fieldSetContainer.append( $("<div />").addClass("dx-fieldset-header").text("Options"), $("<div />").addClass("dx-field").append( $("<div />").addClass("dx-field-label").text("Swipe to reveal the menu"), $("<div />").addClass("dx-field-value switch") ) ); itemElement.append($infoContainer, $fieldSetContainer); $(".switch").dxSwitch({ value: slideOut ? slideOut.option("swipeEnabled") : true, onValueChanged: function(e) { slideOut.option("swipeEnabled", e.value); } }); }, menuGroupTemplate: function(e) { return "<b>" + e.key + "</b>"; } }).dxSlideOut("instance"); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="slideout-container"> <div id="slideout"></div> </div> </div> </body> </html>

p { margin: 0; } #info { width: 200px; height: 200px; text-align: center; margin: 0 auto; margin-top: 10px; } #info img { width: 100%; } .slideout-container { height: auto; position: absolute; top: 0; bottom: 0; width:100%; } .dx-field-label { width: 70%; }

var products = [{ key: "Televisions", items: [ { text: "SuperLCD 42", price: "$1200", src: "../../../../images/products/7.png" }, { text: "SuperLED 42", price: "$1450", src: "../../../../images/products/5.png" }, { text: "SuperLED 50", price: "$1600", src: "../../../../images/products/4.png" }, { text: "SuperLCD 55", price: "$1350", src: "../../../../images/products/6.png" }, { text: "SuperLCD 70", price: "$4000", src: "../../../../images/products/9.png" } ] }, { key: "Monitors", items: [ { text: "DesktopLCD 19", price: "$160", src: "../../../../images/products/10.png" }, { text: "DesktopLCD 21", price: "$170", src: "../../../../images/products/12.png" }, { text: "DesktopLED 21", price: "$180", src: "../../../../images/products/13.png" } ] }, { key: "Projectors", items: [ { text: "Projector Plus", price: "$550", src: "../../../../images/products/14.png" }, { text: "Projector PlusHD", price: "$750", src: "../../../../images/products/15.png" } ] }, { key: "Video Players", items: [ { text: "HD Video Player", price: "$220", src: "../../../../images/products/1.png" }, { text: "SuperHD Video Player", price: "$270", src: "../../../../images/products/2.png" } ] } ];

Slideout

jQuery

Angular

Vue

React

AngularJS