目录
AntDesign是一套企业级框架,但是目前还没有提供admin后台管理模板,只能自己搭建一个了,那么接下来开始搭建
MainLayout.razor
@inherits LayoutComponentBase
@code
{
bool collapsed;
string ImgStr = "./Images/logo.PNG";
void toggle()
{
collapsed = !collapsed;
if (collapsed)
{
ImgStr = "./Images/logo-Ico.PNG";
}
else
{
ImgStr = "./Images/logo.PNG";
}
}
}
<Layout Style="min-height:100vh;">
<Sider Collapsible Collapsed=@collapsed NoTrigger Breakpoint="@BreakpointType.Lg">
<div class="logo" align="center">
<img src="@ImgStr" height="32"/>
</div>
<NavMenu></NavMenu>
</Sider>
<Layout Class="site-layout">
<Header Class="site-layout-background" Style="padding:0;">
@if (collapsed)
{
<Icon Type="menu-unfold" Theme="outline" Class="trigger" OnClick="toggle" />
}
else
{
<Icon Type="menu-fold" Theme="outline" Class="trigger" OnClick="toggle" />
}
</Header>
<Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 280px;">
@Body
</Content>
<Footer Style="text-align: center;">Caviar ©2021 Created by 北音执念</Footer>
</Layout>
</Layout>
@code{
void OnCollapse(bool isCollapsed)
{
Console.WriteLine($"Collapsed: {isCollapsed}");
}
}
NavMenu.razor
<Menu Mode="MenuMode.Inline"
Accordion
Theme="MenuTheme.Dark"
SelectedKeys="@(new[] { "1"})"
OpenKeys="@(new[] { "sub1" })"
>
<SubMenu Key="sub1" TitleTemplate=@sub1Title>
<MenuItem Key="1">Option 1</MenuItem>
<MenuItem Key="2">Option 2</MenuItem>
<MenuItem Key="3">Option 3</MenuItem>
<MenuItem Key="4">Option 4</MenuItem>
</SubMenu>
<SubMenu Key="sub2" TitleTemplate=@sub2Title>
<MenuItem Key="5">Option 5</MenuItem>
<MenuItem Key="6">Option 6</MenuItem>
<SubMenu Key="sub3" Title="Submenu">
<MenuItem Key="7">Option 7</MenuItem>
<MenuItem Key="8">Option 8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu Key="sub4" TitleTemplate=@sub4Title>
<MenuItem Key="9">Option 9</MenuItem>
<MenuItem Key="10">Option 10</MenuItem>
<MenuItem Key="11">Option 11</MenuItem>
<MenuItem Key="12">Option 12</MenuItem>
</SubMenu>
</Menu>
@code {
RenderFragment sub1Title =
@<span>
<Icon Type="mail" Theme="outline"></Icon>
<span>Navigation One</span>
</span>;
RenderFragment sub2Title =
@<span>
<Icon Type="appstore" Theme="outline"></Icon>
<span>Navigation Two</span>
</span>;
RenderFragment sub4Title =
@<span>
<Icon Type="setting" Theme="outline"></Icon>
<span>Navigation Three</span>
</span>;
}
wwwroot/app.css
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a, .btn-link {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 32px;
margin: 16px;
}
.site-layout .site-layout-background {
background: #fff;
}
运行效果
知识点
1、可以看出Blazor控制起来非常非常方便,比如指定img的src,只需要一个@变量,就可以随意变化,由代码控制,这要比js或者jquery方便多了。
2、代码可以和页面写在一起,也可以分开,这极大方便了开发者,各种回调函数,停不下来。
3、可以看出来组件化开发NavMenu为菜单组件,直接可以在Labout中使用,其他同理,只要专注于组件化开发即可。
4、MainLayout.razor里面注册了LayoutComponentBase类,然后正文窗口是@Body,路由方面@page即可
结论
虽然简单搭出来界面,但是还存在许多问题,如前后端代码没有分开,没有写配置项等,前端显示也有一些问题,比如菜单缩放时候会产生bug:
这类bug都和缩放有关,下一期专门解决这个bug,然后还缺一点头像等配置,下一期将admin界面搭建出来。