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#
作者:重庆熊猫
出处:https://www.cnblogs.com/cqpanda/p/17596405.html
版权:本作品采用「不论是否商业使用都不允许转载,否则按3元1字进行收取费用」许可协议进行许可。
本文来自博客园,作者:重庆熊猫,转载请注明原文链接:https://www.cnblogs.com/cqpanda/p/17596405.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!