这篇笔记我们对Blazor中布局和页面组件相关的使用方式进行介绍。
Blazor中,Layout是一种特殊的组件,它能够定义通用的UI框架结构。要创建一个Layout组件,我们需要继承LayoutComponentBase
类。下面例子就是一个最简单的Layout组件。
Components/Layout/MyLayout.razor
@inherits LayoutComponentBase
<div>
<span>首页</span>
<span>软件</span>
<span>游戏</span>
<span>关于</span>
</div>
<div>@Body</div>
Components/Pages/Home.razor
@page "/"
@using Gacfox.DemoBlazorServer.Components.Layout
@layout MyLayout
<h1>Hello, world!</h1>
Layout组件中,我们使用@inherits
指令继承了LayoutComponentBase
,@Body
是引用Layout框架的组件的占位符,它用于设置内容呈现的位置。对于需要引入Layout的组件,我们使用@layout
指令引入即可。
除了使用@layout
指令引用布局,我们也可以在路由系统的<RouteView>
中指定默认布局,这样所有未单独指定布局的页面都会应用这个默认布局Layout组件。
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MyLayout)" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
</Router>
Blazor中,页面也是一个Blazor组件,只不过页面组件注册到了路由系统,浏览器中我们输入对应URL时,页面组件将作为对应路由的UI界面组件树起点被呈现。
@page "/"
<h1>Hello, world!</h1>
Blazor组件中我们可以配置标题等头信息,下面是一个例子。
@page "/"
<PageTitle>首页</PageTitle>
<h1>Hello, world!</h1>
<HeadContent>
<meta name="description" content="首页" />
</HeadContent>
代码中,<PageTitle>
指定了页面标题,<HeadContent>
指定了页面<head>
内部包裹的自定义内容。实际上,上面写法之所以能够生效,是因为在App.razor
入口组件中我们使用了<HeadOutlet />
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="Gacfox.DemoBlazorServer.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
配置<HeadOutlet />
后,我们就可以在子组件中额外配置页面标题和<head>
内容等信息了。