var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.data = products;
$scope.menuVisible = true;
$scope.swipeValue = true;
$scope.showMenu = function() {
$scope.menuVisible = !$scope.menuVisible;
};
$scope.toolbarItems = [{
location: "before",
widget: "dxButton",
options: {
icon: "menu",
onClick: $scope.showMenu
}
}, {
location: "center",
template: "title"
}];
});
<!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.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.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" ng-app="DemoApp" ng-controller="DemoController">
<div class="slideout-container">
<div dx-slide-out="{
dataSource: data,
onItemClick: showMenu,
menuGrouped: true,
bindingOptions: {
menuVisible: 'menuVisible',
swipeEnabled: 'swipeValue'
}
}" dx-item-alias="product">
<div data-options="dxTemplate: { name: 'item' }">
<div dx-toolbar="{ dataSource: toolbarItems }">
<div data-options="dxTemplate: { name: 'title' }">
<p>{{product.text}}</p>
</div>
</div>
<div id="info">
<img class="image" ng-src="{{product.src}}">
<h1>{{product.price}}</h1>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Options</div>
<div class="dx-field">
<div class="dx-field-label">Swipe to reveal the menu</div>
<div class="dx-field-value" dx-switch="{
bindingOptions: {
value: '$parent.swipeValue'
}
}"></div>
</div>
</div>
</div>
<div data-options="dxTemplate: { name: 'menuGroup' }">
<b>{{product.key}}</b>
</div>
</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" }
]
}
];