@model IEnumerable<DevExtreme.NETCore.Demos.Models.NavigationItemWithIcon>
@{
var showModes = new[] { "push", "shrink", "overlap" };
var positionModes = new[] { "left", "right" };
var showSubmenuModes = new[] { "slide", "expand" };
}
<div class="toolbar">
@(Html.DevExtreme().Toolbar()
.Items(items => {
items.Add()
.Widget(w => w
.Button()
.Icon("menu")
.OnClick("openButton_click")
)
.Location(ToolbarItemLocation.Before);
})
)
</div>
<div class="drawer">
@(Html.DevExtreme().Drawer()
.ID("drawer")
.OpenedStateMode(DrawerOpenedStateMode.Shrink)
.Opened(true)
.Position(DrawerPosition.Left)
.Height(400)
.RevealMode(DrawerRevealMode.Slide)
.CloseOnOutsideClick(true)
.Content(@<text>
<div id="content" class="dx-theme-background-color">
<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. 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.</p>
</div>
</text>)
.Template(@<text>
<div style="width: 200px">
@(Html.DevExtreme().List()
.DataSource(Model)
.HoverStateEnabled(false)
.FocusStateEnabled(false)
.ActiveStateEnabled(false)
.ElementAttr("class", "panel-list dx-theme-accent-as-background-color")
)
</div>
</text>)
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="options-container">
<div class="option">
<label>Opened state mode</label>
@(Html.DevExtreme().RadioGroup()
.Items(showModes)
.Value(showModes[1])
.Layout(Orientation.Horizontal)
.OnValueChanged("showMode_valueChanged")
)
</div>
<div class="option">
<label>Position</label>
@(Html.DevExtreme().RadioGroup()
.Items(positionModes)
.Value(positionModes[0])
.Layout(Orientation.Horizontal)
.OnValueChanged("position_valueChanged")
)
</div>
<div id="revealMode" class="option">
<label>Reveal mode</label>
@(Html.DevExtreme().RadioGroup()
.Items(showSubmenuModes)
.Value(showSubmenuModes[0])
.Layout(Orientation.Horizontal)
.OnValueChanged("submenuMode_valueChanged")
)
</div>
</div>
</div>
<script>
function showMode_valueChanged(data) {
var drawer = $("#drawer").dxDrawer("instance");
drawer.option("openedStateMode", data.value);
if (data.value === 'push') {
$("#revealMode").hide();
} else {
$("#revealMode").show();
}
}
function position_valueChanged(data) {
var drawer = $("#drawer").dxDrawer("instance");
drawer.option("position", data.value);
}
function submenuMode_valueChanged(data) {
var drawer = $("#drawer").dxDrawer("instance");
drawer.option("revealMode", data.value);
}
function openButton_click() {
var drawer = $("#drawer").dxDrawer("instance");
drawer.toggle();
}
</script>
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.Demos.Controllers {
public class DrawerController : Controller {
public ActionResult LeftOrRightPosition() {
return View(SampleData.NavigationItemsWithIcon);
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<NavigationItemWithIcon> NavigationItemsWithIcon = new[] {
new NavigationItemWithIcon {
id = 1,
text = "Products",
icon = "product"
},
new NavigationItemWithIcon {
id = 2,
text = "Sales",
icon = "money"
},
new NavigationItemWithIcon {
id = 3,
text = "Customers",
icon = "group"
},
new NavigationItemWithIcon {
id = 4,
text = "Employees",
icon = "card"
},
new NavigationItemWithIcon {
id = 5,
text = "Reports",
icon = "chart"
}
};
}
}
using System;
namespace DevExtreme.NETCore.Demos.Models {
public class NavigationItemWithIcon {
public int id { get; set; }
public string text { get; set; }
public string icon { get; set; }
}
}
.dx-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;
}
.panel-list {
height: 400px;
}
.dx-drawer-expand.dx-drawer-right .panel-list {
float: right;
}
.panel-list .dx-list-item {
color: #fff;
border-top: 1px solid rgba(221, 221, 221, .2);
}
.panel-list .dx-list-item .dx-icon {
color: #fff !important;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, .15);
}
.options-container {
display: flex;
align-items: center;
}
.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;
}