Skip to content

Commit 51baf5f

Browse files
artemkuzmindevexpressartemkuzmindevexpress
committed
ExampleFirstVersion
1 parent 5438435 commit 51baf5f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+14105
-0
lines changed

‎CS/DxBlazorApplication1.sln‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35527.113
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DxBlazorApplication1", "DxBlazorApplication1\DxBlazorApplication1.csproj", "{59B78194-0176-4F83-89C4-6A5F871FB9D5}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{59B78194-0176-4F83-89C4-6A5F871FB9D5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{59B78194-0176-4F83-89C4-6A5F871FB9D5}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{59B78194-0176-4F83-89C4-6A5F871FB9D5}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{59B78194-0176-4F83-89C4-6A5F871FB9D5}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
EndGlobal

‎CS/DxBlazorApplication1/Components/App.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@using Microsoft.AspNetCore.Mvc.ViewFeatures
2+
@inject IFileVersionProvider FileVersionProvider
3+
4+
<!DOCTYPE html>
5+
<html lang="en" >
6+
<head>
7+
<meta charset="utf-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<base href="/" />
10+
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />
11+
<script type="text/javascript" src="js/mdi.js"></script>
12+
@DxResourceManager.RegisterScripts()
13+
<link href=@AppendVersion("css/site.css") rel="stylesheet" />
14+
<link href=@AppendVersion("DxBlazorApplication1.styles.css") rel="stylesheet" />
15+
<HeadOutlet />
16+
</head>
17+
<body>
18+
<Routes @rendermode=InteractiveServer></Routes>
19+
<script src="_framework/blazor.web.js"></script>
20+
</body>
21+
22+
</html>
23+
24+
@code{
25+
private string AppendVersion(string path) => FileVersionProvider.AddFileVersionToPath("/", path);
26+
}

‎CS/DxBlazorApplication1/Components/Layout/Drawer.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@inherits LayoutComponentBase
2+
@inject NavigationManager NavigationManager
3+
4+
<div>
5+
<DxDrawer PanelWidth="@Width" CssClass="@(CssClass + " mobile")" Mode="@DrawerMode.Overlap" IsOpen="@ToggledSidebar" HeaderTemplate="@DrawerHeader" FooterTemplate="@DrawerFooter" ApplyBackgroundShading="false" ClosedCssClass="panel-closed">
6+
<BodyTemplate>
7+
@DrawerBody
8+
</BodyTemplate>
9+
<TargetContent>
10+
<DxDrawer PanelWidth="@Width" CssClass="@CssClass" Mode="@DrawerMode.Shrink" IsOpen="@(!ToggledSidebar)" HeaderTemplate="@DrawerHeader" FooterTemplate="@DrawerFooter" OpenCssClass="panel-open" >
11+
<BodyTemplate>
12+
@DrawerBody
13+
</BodyTemplate>
14+
<TargetContent>
15+
<div class="shading-copy" />
16+
@DrawerTarget
17+
</TargetContent>
18+
</DxDrawer>
19+
</TargetContent>
20+
</DxDrawer>
21+
</div>
22+
23+
@code {
24+
string Width => "240px";
25+
string CssClass => "navigation-drawer";
26+
27+
[SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
28+
public bool ToggledSidebar { get; set; }
29+
[Parameter] public RenderFragment? DrawerTarget { get; set; }
30+
[Parameter] public RenderFragment? DrawerBody { get; set; }
31+
[Parameter] public RenderFragment? DrawerHeader { get; set; }
32+
[Parameter] public RenderFragment? DrawerFooter { get; set; }
33+
}

‎CS/DxBlazorApplication1/Components/Layout/Drawer.razor.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
::deep .navigation-drawer {
2+
--dxbl-drawer-panel-footer-justify-content: center;
3+
height: 100vh;
4+
max-height: 100%;
5+
}
6+
7+
::deep .panel-open:not(.mobile) .menu-button {
8+
display: none;
9+
}
10+
11+
@media (max-width: 768px) {
12+
::deep .panel-open:not(.mobile) .menu-button {
13+
display: inline-flex;
14+
}
15+
16+
.mobile-drawer-closed .shading-copy {
17+
display: none;
18+
visibility: hidden;
19+
}
20+
21+
::deep .shading-copy {
22+
background-color: var(--dxbl-drawer-content-shading-bg);
23+
height: 100%;
24+
position: absolute;
25+
transition: opacity ease var(--dxbl-drawer-animation-duration);
26+
visibility: visible;
27+
width: 100%;
28+
z-index: 99;
29+
opacity: var(--dxbl-drawer-content-shading-opacity);
30+
}
31+
32+
::deep .panel-open .shading-copy {
33+
opacity: 0;
34+
visibility: unset;
35+
height: unset;
36+
}
37+
}

‎CS/DxBlazorApplication1/Components/Layout/MainLayout.razor‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@inherits LayoutComponentBase
2+
@inject NavigationManager NavigationManager
3+
4+
<div class="page">
5+
<Drawer DrawerHeader="drawerHeader" DrawerFooter="drawerFooter">
6+
<DrawerBody>
7+
<div class="w-100">
8+
<NavMenu ItemClick="OnItemClick"></NavMenu>
9+
</div>
10+
</DrawerBody>
11+
<DrawerTarget>
12+
<CascadingValue TValue="IMenuItemInfo" Name="ClickedMenuItemName" Value='ClickedMenuItemName'>
13+
@Body
14+
</CascadingValue>
15+
</DrawerTarget>
16+
</Drawer>
17+
</div>
18+
19+
@code {
20+
public IMenuItemInfo? ClickedMenuItemName { get; set; }
21+
22+
private void OnItemClick(MenuItemClickEventArgs e){
23+
ClickedMenuItemName = e.ItemInfo;
24+
}
25+
26+
[SupplyParameterFromQuery(Name = UrlGenerator.ToggleSidebarName)]
27+
public bool ToggledSidebar { get; set; }
28+
29+
private RenderFragment drawerHeader => @<div class="navigation-drawer-header">
30+
<img class="logo" src="images/logo.svg" alt="DevExpress logo" />
31+
<NavLink href="@UrlGenerator.GetUrl(new Uri(NavigationManager.Uri).LocalPath, !ToggledSidebar)">
32+
<DxButton RenderStyle="@ButtonRenderStyle.Light" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="menu-button-nav" IconCssClass="@(ToggledSidebar ? "icon icon-close" : "icon icon-menu")"></DxButton>
33+
</NavLink>
34+
</div>;
35+
36+
private RenderFragment drawerFooter => @<div>
37+
<NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">
38+
<DxButton Text="Docs" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="@ButtonRenderStyle.Light" IconCssClass="icon docs-icon"></DxButton>
39+
</NavLink>
40+
<NavLink href="https://demos.devexpress.com/blazor/" class="button-link">
41+
<DxButton Text="Demos" RenderStyleMode="@ButtonRenderStyleMode.Text" CssClass="footer-button" RenderStyle="@ButtonRenderStyle.Light" IconCssClass="icon demos-icon"></DxButton>
42+
</NavLink>
43+
</div>;
44+
45+
46+
}

‎CS/DxBlazorApplication1/Components/Layout/MainLayout.razor.css‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
.page {
2+
height: 100%;
3+
font-family: var(--bs-font-sans-serif);
4+
}
5+
6+
::deep .navigation-drawer > .dxbl-drawer-panel {
7+
background-image: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-black) 150%);
8+
}
9+
10+
::deep .dxbl-drawer .dxbl-drawer-content {
11+
height: 100vh;
12+
overflow: auto;
13+
}
14+
15+
::deep .dxbl-drawer > .dxbl-drawer-panel .dxbl-drawer-header {
16+
border-bottom: none;
17+
padding: 2rem 1rem;
18+
}
19+
20+
::deep .dxbl-drawer-panel .dxbl-drawer-header .navigation-drawer-header {
21+
width: 100%;
22+
display: flex;
23+
justify-content: space-between;
24+
}
25+
26+
::deep .dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
27+
--dxbl-drawer-panel-body-padding-x: 0;
28+
--dxbl-drawer-panel-body-padding-y: 1rem;
29+
}
30+
31+
::deep .dxbl-drawer > .dxbl-drawer-panel .dxbl-drawer-footer {
32+
--dxbl-drawer-panel-footer-justify-content: center;
33+
border-top: none;
34+
padding-bottom: 1.5rem;
35+
}
36+
37+
::deep .content {
38+
overflow: auto;
39+
display: flex;
40+
flex-direction: column;
41+
}
42+
43+
::deep .icon {
44+
-webkit-mask-repeat: no-repeat;
45+
mask-repeat: no-repeat;
46+
mask-position: center center;
47+
-webkit-mask-mask-position: center center;
48+
width: 1rem;
49+
height: 1rem;
50+
background-repeat: no-repeat;
51+
background-color: var(--dxbl-btn-color);
52+
}
53+
54+
::deep .icon-back {
55+
-webkit-mask-image: url("images/back.svg");
56+
mask-image: url("images/back.svg");
57+
}
58+
59+
::deep .icon-close {
60+
-webkit-mask-image: url("images/close.svg");
61+
mask-image: url("images/close.svg");
62+
}
63+
64+
::deep .icon-menu {
65+
-webkit-mask-image: url("images/menu.svg");
66+
mask-image: url("images/menu.svg");
67+
}
68+
69+
::deep .icon-log-in {
70+
-webkit-mask-image: url("images/account/log-in.svg");
71+
mask-image: url("images/account/log-in.svg");
72+
}
73+
74+
::deep .icon-log-out {
75+
-webkit-mask-image: url("images/account/log-out.svg");
76+
mask-image: url("images/account/log-out.svg");
77+
}
78+
79+
::deep .icon-user {
80+
-webkit-mask-image: url("images/account/user.svg");
81+
mask-image: url("images/account/user.svg");
82+
}
83+
84+
::deep .docs-icon {
85+
mask-image: url("images/doc.svg");
86+
-webkit-mask-image: url("images/doc.svg");
87+
-webkit-mask-repeat: no-repeat;
88+
mask-repeat: no-repeat;
89+
background-color: var(--dxbl-btn-color);
90+
}
91+
92+
::deep .demos-icon {
93+
mask-image: url("images/demos.svg");
94+
-webkit-mask-image: url("images/demos.svg");
95+
-webkit-mask-repeat: no-repeat;
96+
mask-repeat: no-repeat;
97+
background-color: var(--dxbl-btn-color);
98+
}
99+
100+
::deep .footer-button:hover .demos-icon {
101+
background-color: var(--dxbl-btn-hover-color);
102+
}
103+
104+
::deep .footer-button:hover .docs-icon {
105+
background-color: var(--dxbl-btn-hover-color);
106+
}
107+
108+
::deep .menu-button:hover .icon {
109+
background-color: var(--dxbl-btn-hover-color);
110+
}
111+
112+
::deep .menu-button-nav:hover .icon {
113+
background-color: var(--dxbl-btn-hover-color);
114+
}
115+
116+
.panel-open .menu-button {
117+
display: inline-flex;
118+
}
119+
120+
.menu-button-nav {
121+
background-image: url("images/close.svg");
122+
width: 1.875rem;
123+
height: 1.875rem;
124+
}
125+
126+
.nav-buttons-container {
127+
display: flex;
128+
gap: 10px;
129+
padding: 2rem 1rem;
130+
}
131+
132+
.nav-buttons-container ::deep .menubutton-float-end {
133+
margin-left: auto;
134+
}
135+
136+
.nav-buttons-container ::deep .dxbl-btn-icon-only {
137+
--dxbl-btn-padding-x: 0.75rem;
138+
--dxbl-btn-padding-y: 0.25rem;
139+
}
140+
141+
::deep .navigation-drawer > .dxbl-drawer-panel {
142+
display: flex;
143+
}
144+
145+
::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
146+
display: none;
147+
}
148+
149+
::deep .navigation-drawer.mobile > .dxbl-drawer-shading {
150+
display: none;
151+
}
152+
153+
@media (max-width: 768px) {
154+
::deep .navigation-drawer > .dxbl-drawer-panel {
155+
display: none;
156+
}
157+
158+
::deep .navigation-drawer.mobile > .dxbl-drawer-panel {
159+
display: flex;
160+
}
161+
162+
::deep .navigation-drawer.mobile > .dxbl-drawer-shading {
163+
display: block;
164+
}
165+
}

‎CS/DxBlazorApplication1/Components/Layout/NavMenu.razor‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div id="sidebar">
2+
<DxMenu ItemClick="async (e) => await ItemClick.InvokeAsync(e)" Orientation="@Orientation.Vertical" CssClass="menu">
3+
<Items>
4+
<DxMenuItem Name="Counter" Text="Counter" CssClass="menu-item" IconCssClass="icon counter-icon"></DxMenuItem>
5+
<DxMenuItem Name="Weather" Text="Weather" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem>
6+
<DxMenuItem Name="Forms" Text="Forms" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem>
7+
</Items>
8+
</DxMenu>
9+
</div>
10+
11+
@code{
12+
[Parameter]
13+
public EventCallback<MenuItemClickEventArgs> ItemClick { get; set; }
14+
}

0 commit comments

Comments
 (0)