布局和页面

这篇笔记我们对Blazor中布局和页面组件相关的使用方式进行介绍。

Layout 布局组件

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>内容等信息了。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap