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.
image

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#

image

作者:重庆熊猫

出处:https://www.cnblogs.com/cqpanda/p/17596405.html

版权:本作品采用「不论是否商业使用都不允许转载,否则按3元1字进行收取费用」许可协议进行许可。

posted @   重庆熊猫  阅读(12)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
more_horiz
keyboard_arrow_up light_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示