Blazor笔记-Component Layout

更新记录

注意：非教程。纯笔记，日常查询用的。需要教程的小伙伴找几本书看看即可哈哈，有Vue基础的话非常快，概念都是通的。非工作需要不建议深入学习Blazor，深入Vue吧，用的多，哈哈。

完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html

点击查看

2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

layout component

A layout component in Blazor is a component that defines the overall structure of a webpage. It serves as a wrapper for other components and provides a consistent look and feel across the entire application. The layout component has a @Body property, which serves as a placeholder for the content of the wrapped components.

Layout templates can be applied not only to the entire website but also to individual components. This allows for different components to have different layouts, or for a single layout template to be used to structure the layout of multiple components. This feature provides flexibility and modularity in the design of the user interface, as well as the ability to make changes to the layout of specific components without affecting the rest of the application.

Component Layout

default layout for entire website

In order to set the default layout for your website in Blazor, you can use the RouteView component.
To do this, navigate to the App.razor file and update the DefaultLayout parameter of the RouteView component with the name of your desired layout component. For example:

<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

Setting a layout for all components in a same folder
To set the default layout for all the components inside a specific folder, you can create a new component with the name _Imports.razor within the desired folder.
In this component, add the @layout directive in the directive section.

@layout MyLayout

How to create a layout component

Create a new component by inheriting from the LayoutComponentBase class. This will ensure that your component has access to the necessary properties and methods for functioning as a layout component.

@inherits LayoutComponentBase

Design the structure of your layout by adding various HTML elements and other components as desired. Be sure to include the @Body placeholder, which will be used to render the content of the wrapped components.

<main>
    @Body
</main>

Layout overriding priority