世界快消息！打开MASA Blazor的正确姿势4.1：母版页布局

2023-03-05 22:51:49 来源：博客园

(资料图片)

MASA Blazorr提供了丰富的组件及其控制属性，用于母版页布局（MainLayout.razor）。这些组件包括MApp、MMain、MSystemBar、MAppBar、MNavigationDrawer、MFooter和MBottomNavigation。

一、MApp和MMain组件

MApp是默认母版MainLayout的根组件，其它布局组件都是MApp的子组件，{其它布局组件}。同时，应用的主题（包括Dark、Light、LeftToRight），也可以在MApp中定义。
MMain是@Body的容器，是整个应用的路由出口。其最大的特点是，能够根据其它布局组件，自动调整大小。
整个应用，有且只有一个MApp和MMain，MApp是布局组件的容器，MMain是路由组件的容器，它们并不提供具体的布局功能。
MSystemBar、MFooter、MAppBar、MNavigationDrawer和MBottomNavigation，是母版页中具体可以使用的布局组件。这些组件，即可以在母版页中使用，也可以在其它任意页面使用。如果在母版页中使用，必须加App属性，否则母版页无法识别。

            @Body

位置：Absolute和Fixed，用于设置position样式，一般在非母版页使用。App，专用于母版页，相当于position:fixed。Bottom-是否居于底部（如果有MFooter，将位于MFooter之下）
颜色主题：Dark-暗色主题、Light-亮色主题、Color-背景颜色
大小：Height-具体高度，Width-具体宽度，MaxHeight/MaxWidth/MinHeight/MinWidth
样式：Dense-紧凑高度，Short-减少高度,Prominent-加大高度，Extended/ExtensionHeight-Extended加大高度（在Dense或Prominent基础上）、ExtensionHeight定义加大的具体高度、Flat-删除阴影、Elevation-具体阴影值，Outlined-边框样式，Rounded-具体圆角值，Shaped-左上右下圆角，Tile-删除圆角
背景图：Src-背景图，背景图也可以通过插槽ImgContent设置
滚动行为：
- HideOnScroll/ScrollTarget/ScrollThreshold-HideOnScroll开启滚动隐藏、ScrollTarget定义开启隐藏前的滚动元素（#元素Id）、ScrollThreshold定义开启隐藏前滚动距离（double值）
- InvertedScroll-向下滚动时隐藏、向上滚动时显示
- ShrinkOnScroll-滚动时由Prominent缩小为Dense或Short
- FadeImgOnScroll-滚动时淡化背景图（设置了Src属性或ImgContent插槽）
- ElevateOnScroll-滚动时显示阴影
- Collapse/CollapseOnScroll-Collapse设置是否折叠、CollapseOnScroll设置滚动时折叠

位置：Absolute和Fixed，用于设置position样式，一般在非母版页使用。App，专用于母版页，相当于position:fixed。Right-是否居右、默认居左
颜色主题：Dark-暗色主题、Light-亮色主题、Color-背景颜色
大小：Height-具体高度，Width-具体宽度
背景图：Src-背景图，背景图也可以通过插槽ImgContent设置
抽屉行为：
- ExpandOnHover-折叠为迷你样式，鼠标悬浮时展开
- MiniVariant/MiniVariantWidth-MiniVariant开启迷你样式，MiniVariantWidth设置迷你样式的宽度
- Permanent-始终显示抽屉，默认当达到断点时会隐藏
- Temporary-适用于通过按钮控制抽屉的显示和隐藏，将抽屉悬浮于应用之上，显示为模态样式，
- Bottom-适用于通过按钮控制抽屉的显示和隐藏，默认从侧边弹出，设置为Bottom时，达到手机断点时，从底部弹出
- MobileBreakpoint-设置手机的断点值
- HideOverlay/OverlayColor/OverlayOpacity-还没搞清楚这个遮罩层怎么调出来！！！

默认情况，MAppBar位于MNavigationDrawer的左侧或右侧
将MNavigationDrawer的Clipped属性设置为true，MAppBar的ClippedLeft或ClippedRight属性设置为true，将MAppBar置于MNavigationDrawer的上侧。如MNavigationDrawer居左，则设置ClippedLeft属性；如居右，则设置ClippedRight属性

位置：Absolute和Fixed，用于设置position样式，一般在非母版页使用。App，专用于母版页，相当于position:fixed
颜色主题：Dark-暗色主题、Light-亮色主题、BackgroundColor-背景颜色、Color-当前选择项颜色
大小：Height-具体高度，Width-具体宽度，MaxHeight/MaxWidth/MinHeight/MinWidth
样式：Grow-加大间距，Shift-激活才显示标题，Horizontal-标题位于图标右侧（默认在下方）
滚动行为：HideOnScroll/ScrollTarget/ScrollThreshold-HideOnScroll开启滚动隐藏、ScrollTarget定义开启隐藏前的滚动元素（#元素Id）、ScrollThreshold定义开启隐藏前滚动距离（double值）
当前选择项：Value-具体索引号StringNumber，Values-具体索引号集合List，Multiple-多选模式

通过注入MasaBlazor服务，可以获取布局属性数据，或控制主题。
注入MasaBlazor服务：[Inject] public MasaBlazor MasaBlazor { get; set; }或者@inject MasaBlazor MasaBlazor
获取布局大小属性：MasaBlazor.Application.Footer-MFooter高度，其它属性Bar/InsetFooter/Left/Right/Top/Bottom
改变主题：MasaBlazor.ToggleTheme()