const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('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/22.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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/22.1.4/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%;
}
const 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' },
],
},
];