DevExpress-Examples · elenapeskova · Jul 16, 2025 · Jul 16, 2025
@@ -0,0 +1,29 @@
+@using Microsoft.AspNetCore.Mvc.ViewFeatures
+@using PlaceRichEditInEditForm.Services
+@inject IFileVersionProvider FileVersionProvider
+@inject DxThemesService ThemesService
+
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="@(ThemesService.IsBootstrapDarkActive ? "dark" : null)" data-fluent-darkmode="@(ThemesService.IsFluentDarkModeActive ? "" : null)">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    @DxResourceManager.RegisterTheme(ThemesService.ActiveTheme)
+    @DxResourceManager.RegisterScripts()
+    <link href=@AppendVersion("css/site.css") rel="stylesheet" />
+    <link href=@AppendVersion("PlaceRichEditInEditForm.styles.css") rel="stylesheet" />
+    <link href=@AppendVersion("_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.css") rel="stylesheet" />
+    <HeadOutlet @rendermode="InteractiveServer" />
+</head>
+<body>
+    <Routes @rendermode="InteractiveServer" />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
+
+@code{
+    private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
+
+}
@@ -8,28 +8,28 @@ public partial class SampleData
                 Name = "Nancy Davolio",
                 Address = "507 - 20th Ave. E.Apt. 2A",
                 Phone = "(206) 555-9857",
-                Notes = "Data\\Notes\\NancyDavolio.docx",
+                Notes = "Components\\Data\\Notes\\NancyDavolio.docx",
             },
             new Employee {
                 ID = 2,
                 Name = "Andrew Fuller",
                 Address = "908 W. Capital Way",
                 Phone = "(206) 555-9482",
-                Notes = "Data\\Notes\\AndrewFuller.docx",
+                Notes = "Components\\Data\\Notes\\AndrewFuller.docx",
             },
             new Employee {
                 ID = 3,
                 Name = "Janet Leverling",
                 Address = "722 Moss Bay Blvd.",
                 Phone = "(206) 555-3412",
-                Notes = "Data\\Notes\\JanetLeverling.docx",
+                Notes = "Components\\Data\\Notes\\JanetLeverling.docx",
             },
             new Employee {
                 ID = 4,
                 Name = "Margaret Peacock",
                 Address = "4110 Old Redmond Rd.",
                 Phone = "(206) 555-8122",
-                Notes = "Data\\Notes\\MargaretPeacock.docx",
+                Notes = "Components\\Data\\Notes\\MargaretPeacock.docx",
             }
         };
     }

@@ -0,0 +1,46 @@
+@inherits LayoutComponentBase
+@inject NavigationManager NavigationManager
+
+<div>
+    <DxDrawer PanelWidth="@Width"
+              CssClass="@(CssClass + " mobile")"
+              Mode="@DrawerMode.Overlap"
+              IsOpen="@ToggledSidebar"
+              HeaderTemplate="@DrawerHeader"
+              FooterTemplate="@DrawerFooter"
+              ApplyBackgroundShading="false"
+              ClosedCssClass="panel-closed">
+        <BodyTemplate>
+            @DrawerBody
+        </BodyTemplate>
+        <TargetContent>
+            <DxDrawer PanelWidth="@Width"
+                      CssClass="@CssClass"
+                      Mode="@DrawerMode.Shrink"
+                      IsOpen="@(!ToggledSidebar)"
+                      HeaderTemplate="@DrawerHeader"
+                      FooterTemplate="@DrawerFooter"
+                      OpenCssClass="panel-open" >
+                <BodyTemplate>
+                    @DrawerBody
+                </BodyTemplate>
+                <TargetContent>
+                    <div class="navigation-drawer-shading" />
+                    @DrawerTarget
+                </TargetContent>
+            </DxDrawer>
+        </TargetContent>
+    </DxDrawer>
+</div>
+
+@code {
+    string Width => "240px";
+    string CssClass => "navigation-drawer";
+
+    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
+    public bool ToggledSidebar { get; set; }
+    [Parameter] public RenderFragment? DrawerTarget { get; set; }
+    [Parameter] public RenderFragment? DrawerBody { get; set; }
+    [Parameter] public RenderFragment? DrawerHeader { get; set; }
+    [Parameter] public RenderFragment? DrawerFooter { get; set; }
+}
@@ -0,0 +1,86 @@
+::deep .navigation-drawer {
+    height: 100vh;
+    max-height: 100%;
+}
+
+::deep .panel-open:not(.mobile) .menu-button {
+    display: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel {
+    background-image: linear-gradient(180deg, var(--bs-primary, var(--DS-primary-90)) 0%, var(--bs-black, #000) 150%);
+}
+
+::deep .navigation-drawer > .dxbl-drawer-content {
+    height: 100vh;
+    overflow: auto;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header {
+    border-bottom: none;
+    padding: 2rem 1rem;
+    background: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-header > .navigation-drawer-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
+    --dxbl-drawer-panel-body-padding-x: 0;
+    --dxbl-drawer-panel-body-padding-y: 1rem;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel > .dxbl-drawer-footer {
+    --dxbl-drawer-panel-footer-justify-content: center;
+    border-top: none;
+    padding-bottom: 1.5rem;
+    width: 240px;
+    background: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-panel {
+    display: flex;
+}
+
+::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
+    display: none;
+}
+
+::deep .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    ::deep .panel-open:not(.mobile) .menu-button {
+        display: inline-flex;
+    }
+
+    ::deep .navigation-drawer > .dxbl-drawer-panel {
+        display: none;
+    }
+
+    ::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
+        display: flex;
+    }
+
+    ::deep .navigation-drawer > .dxbl-drawer-content > .navigation-drawer-shading {
+        background-color: var(--dxbl-drawer-content-shading-bg);
+        display: block;
+        height: 100%;
+        position: absolute;
+        transition: ease var(--dxbl-drawer-animation-duration);
+        transition-property: opacity, visibility;
+        visibility: visible;
+        width: 100%;
+        z-index: 99;
+        opacity: var(--dxbl-drawer-content-shading-opacity);
+    }
+
+    ::deep .navigation-drawer.mobile.panel-closed .navigation-drawer-shading {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
@@ -0,0 +1,51 @@
+@inherits LayoutComponentBase
+@using PlaceRichEditInEditForm.Services;
+@inject NavigationManager NavigationManager
+@inject DxThemesService ThemesService
+
+<div class="page">
+    <Drawer DrawerHeader="drawerHeader" DrawerFooter="drawerFooter">
+        <DrawerBody>
+            <div class="w-100">
+                <NavMenu></NavMenu>
+            </div>
+        </DrawerBody>
+        <DrawerTarget>
+            <div class="nav-buttons-container">
+                <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
+                    <DxButton RenderStyle="@(ThemesService.IsActiveThemeDark ? ButtonRenderStyle.Light : ButtonRenderStyle.Dark)" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button" IconCssClass="icon icon-menu"></DxButton>
+                </NavLink>
+                @if (new Uri(NavigationManager.Uri).LocalPath != "/") {
+                    <NavLink href="@UrlGenerator.GetUrl("/", ToggledSidebar)" class="button-link hidden">
+                        <DxButton RenderStyle="@(ThemesService.IsActiveThemeDark ? ButtonRenderStyle.Light : ButtonRenderStyle.Dark)" Text="Back to Home" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="icon icon-back"></DxButton>
+                    </NavLink>
+                }
+            </div>
+            <div class="p-4">
+                @Body
+            </div>
+        </DrawerTarget>
+    </Drawer>
+</div>
+
+@code {
+    [SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
+    public bool ToggledSidebar { get; set; }
+
+    private RenderFragment drawerHeader => @<div class="navigation-drawer-header">
+        <img class="logo" src="images/logo.svg" alt="DevExpress logo" />
+        <NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
+            <DxButton RenderStyle="@(ThemesService.IsBootstrapDarkActive ? ButtonRenderStyle.Dark : ButtonRenderStyle.Light)" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="@(ToggledSidebar ? "icon icon-close" : "icon icon-menu")"></DxButton>
+        </NavLink>
+    </div>;
+
+    private RenderFragment drawerFooter => @<div>
+        <NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">
+            <DxButton Text="Docs" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="ButtonRenderStyle.Light" IconCssClass="icon docs-icon"></DxButton>
+        </NavLink>
+        <NavLink href="https://demos.devexpress.com/blazor/" class="button-link">
+            <DxButton Text="Demos" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="ButtonRenderStyle.Light" IconCssClass="icon demos-icon"></DxButton>
+        </NavLink>
+    </div>;
+
+}
@@ -0,0 +1,59 @@
+.page {
+    height: 100%;
+    font-family: var(--bs-font-sans-serif, var(--DS-font-family-sans-serif));
+}
+
+.logo {
+    text-align: center;
+}
+
+::deep .icon-back {
+    --icon-mask-image: var(--icon-back-mask-image);
+}
+
+::deep .icon-close {
+    --icon-mask-image: var(--icon-close-mask-image);
+}
+
+::deep .icon-menu {
+    --icon-mask-image: var(--icon-menu-mask-image);
+}
+
+
+::deep .docs-icon {
+    --icon-mask-image: var(--icon-docs-mask-image);
+}
+
+::deep .demos-icon {
+    --icon-mask-image: var(--icon-demos-mask-image);
+}
+
+::deep .footer-button:hover .demos-icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .footer-button:hover .docs-icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .menu-button:hover .icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+::deep .menu-button-nav:hover .icon {
+    background-color: var(--dxbl-btn-hover-color);
+}
+
+.panel-open .menu-button {
+    display: inline-flex;
+}
+
+.nav-buttons-container {
+    display: flex;
+    gap: 10px;
+    padding: 2rem 1rem;
+}
+
+.nav-buttons-container ::deep .menubutton-float-end {
+    margin-left: auto;
+}
@@ -0,0 +1,9 @@
+<div>
+    <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
+        <Items>
+            <DxMenuItem NavigateUrl="/" Text="Home" CssClass="menu-item" IconCssClass="icon home-icon"></DxMenuItem>
+            <DxMenuItem NavigateUrl="/counter" Text="Counter" CssClass="menu-item" IconCssClass="icon counter-icon"></DxMenuItem>
+            <DxMenuItem NavigateUrl="/weather" Text="Weather" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem>                                    
+        </Items>
+    </DxMenu>
+</div>
@@ -0,0 +1,49 @@
+::deep .menu.display-mobile {
+    margin-bottom: 2rem;
+}
+
+::deep .menu {
+    --dxbl-menu-bottom-left-border-radius: 0;
+    --dxbl-menu-bottom-right-border-radius: 0;
+    --dxbl-menu-top-left-border-radius: 0;
+    --dxbl-menu-top-right-border-radius: 0;
+
+    background-color: inherit;
+}
+
+::deep .menu .dxbl-menu-item-list {
+    gap: 0.5rem;
+}
+
+::deep .menu-item {
+    color: var(--bs-white, #fff);
+}
+
+::deep .icon {
+    margin-left: 0.5rem;
+}
+
+::deep .home-icon {
+    --icon-mask-image: var(--icon-home-mask-image);
+}
+
+::deep .weather-icon {
+    --icon-mask-image: var(--icon-weather-mask-image);
+}
+
+::deep .counter-icon {
+    --icon-mask-image: var(--icon-counter-mask-image);
+}
+
+
+@media (max-width: 768px) {
+    #sidebar {
+        min-width: inherit;
+        max-width: inherit;
+        display: block;
+    }
+
+    .logo {
+        text-align: inherit;
+    }
+}