Your search did not match any results.
Drawer

Top or Bottom Position

Documentation

This example shows a Drawer that opens from the top or bottom of the view. You can use the radio buttons under the Drawer to change its position and behavior in relation to the view.

Copy to CodePen
Apply
Reset
$(function() { $("#content").html(text); var drawer = $("#drawer").dxDrawer({ openedStateMode: "shrink", opened: false, position: "top", height: 400, revealMode: "expand", closeOnOutsideClick: true, template: function() { var $list = $("<div/>").addClass("panel-list"); $list.dxList({ dataSource: navigation, elementAttr: { class: "dx-theme-accent-as-background-color" } }); return $list; } }).dxDrawer("instance"); $("#toolbar").dxToolbar({ items: [{ widget: 'dxButton', options: { icon: 'menu', onClick: function() { drawer.toggle(); } }, location: 'before' }] }); var showModes = ["push", "shrink", "overlap"]; $("#opened-state-mode").dxRadioGroup({ items: showModes, layout: "horizontal", onValueChanged: function(data) { drawer.option("openedStateMode", data.value); if(data.value === "push") { $("#reveal-mode-option").hide(); } else { $("#reveal-mode-option").show(); } }, value: showModes[1] }).dxRadioGroup("instance"); var positionModes = ["top", "bottom"]; $("#position-mode").dxRadioGroup({ items: positionModes, layout: "horizontal", onValueChanged: function(data) { drawer.option("position", data.value); }, value: positionModes[0] }).dxRadioGroup("instance"); var showSubmenuModes = ["slide", "expand"]; $("#reveal-mode").dxRadioGroup({ items: showSubmenuModes, layout: "horizontal", onValueChanged: function (data) { drawer.option("revealMode", data.value); }, value: showSubmenuModes[1] }).dxRadioGroup("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.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/18.2.3/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 id="toolbar"></div> <div id="drawer"> <div id="content" class="dx-theme-background-color"> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <label>Opened state mode</label> <div id="opened-state-mode"></div> </div> <div class="option"> <label>Position</label> <div id="position-mode"></div> </div> <div id="reveal-mode-option" class="option"> <label>Reveal mode</label> <div id="reveal-mode"></div> </div> </div> </div> </body> </html>
#toolbar { background-color: rgba(191, 191, 191, .15); padding: 5px 10px; } .dx-list-item-icon-container, .dx-toolbar-before { width: 36px; padding-right: 0px!important; text-align: center; } .dx-list-item-content { padding-left: 10px !important; } .dx-button { background-color: rgba(191, 191, 191, -0.15); border: none; } .dx-drawer-shrink #content { overflow: hidden; transition: all 0.4s ease-out; column-width: 900px; } .dx-drawer-shrink.dx-drawer-opened #content{ column-width: 300px; margin-right: -10px; } .panel-list { height: 200px; pointer-events: none; } .panel-list .dx-list-item { color: #fff; text-align: center; border-top: 1px solid rgba(221, 221, 221, .2); } .options { padding: 20px; background-color: rgba(191, 191, 191, .15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; display: inline-block; margin-right: 50px; } label { font-weight: bold; } #content { height: 100%; padding: 10px 20px; } #content h2 { font-size: 26px; }
var navigation = [ { id: 1, text: "Products" }, { id: 2, text: "Sales" }, { id: 3, text: "Customers" }, { id: 4, text: "Employees" }, { id: 5, text: "Reports" } ]; var text = "<h2><b>Drawer Demo</b></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Penatibus et magnis dis parturient. In hac habitasse platea dictumst vestibulum. Blandit libero volutpat sed cras. Eget dolor morbi non arcu risus. Tristique magna sit amet purus gravida quis blandit. Auctor urna nunc id cursus metus aliquam eleifend mi in. Tellus orci ac auctor augue mauris augue neque gravida. Nullam vehicula ipsum a arcu. Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi. Cursus in hac habitasse platea dictumst. Egestas dui id ornare arcu. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.</p><p>Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Neque volutpat ac tincidunt vitae semper quis lectus. Sed sed risus pretium quam vulputate dignissim suspendisse in.Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Amet cursus sit amet dictum sit amet justo donec enim. Vestibulum rhoncus est pellentesque elit ullamcorper. Id aliquet risus feugiat in ante metus dictum at.Mollis nunc sed id semper risus in hendrerit. Enim sit amet venenatis urna cursus.Amet aliquam id diam maecenas. Viverra nam libero justo laoreet sit amet cursus.</p>";