打开MASA Blazor的正确姿势4.1：母版页布局
MASA Blazorr提供了丰富的组件及其控制属性，用于母版页布局（MainLayout.razor）。这些组件包括MApp、MMain、MSystemBar、MAppBar、MNavigationDrawer、MFooter和MBottomNavigation。
一、MApp和MMain组件
1、概述
- MApp是默认母版MainLayout的根组件，其它布局组件都是MApp的子组件，
<MApp>{其它布局组件}</MApp>。同时，应用的主题（包括Dark、Light、LeftToRight），也可以在MApp中定义。 - MMain是@Body的容器，是整个应用的路由出口。其最大的特点是，能够根据其它布局组件，自动调整大小。
- 整个应用，有且只有一个MApp和MMain，MApp是布局组件的容器，MMain是路由组件的容器，它们并不提供具体的布局功能。
- MSystemBar、MFooter、MAppBar、MNavigationDrawer和MBottomNavigation，是母版页中具体可以使用的布局组件。这些组件，即可以在母版页中使用，也可以在其它任意页面使用。如果在母版页中使用，必须加
App属性，否则母版页无法识别。
2、代码结构：
<MApp>
<MSystemBar App></MSystemBar>
<MAppBar App></MAppBar>
<MNavigationDrawer App></MNavigationDrawer>
<MMain>
@Body
</MMain>
<MFooter App></MFooter>
</MApp>
二、MSystemBar和MFooter
1、概述
- MSystemBar：位于布局页的最顶部，通栏，常用于显示状态信息。如果和MAppBar一起使用，它位于MAppBar上方。
- MFooter：位于布局页的底部，通栏，常用于显示底部信息。如果和MBottomNavigation一起使用，它位于MBottomNavigation上方。
2、MSystemBar的常用属性
- 位置：
Absolute和Fixed，用于设置position样式，一般在非母版页使用。App，专用于母版页，相当于position:fixed - 颜色主题：
Dark-暗色主题、Light-亮色主题、Color-背景颜色 - 高度：
Height-具体高度，Window-高度为32px，默认值为24px
3、MFooter的常用属性
- 位置：
Absolute和Fixed，用于设置position样式，一般在非母版页使用。App，专用于母版页，相当于position:fixed - 颜色主题：
Dark-暗色主题、Light-亮色主题、Color-背景颜色 - 大小：
Height-具体高度，Width-具体宽度，MaxHeight/MaxWidth/MinHeight/MinWidth - 样式：
Elevation-具体阴影值，Rounded-具体圆角值，Padless-消除紧缩，更加紧凑
4、MFooter和MNavigationDrawer的相对位置
- 默认情况，MFooter位于MNavigationDrawer的下侧
- MFooter的
Inset属性设置为true，将MFooter置于MNavigationDrawer的右侧或左侧
三、MAppBar和MNavigationDrawer
1、概述
- MAppBar：顶部导航栏
- MNavigationDrawer：侧边导航栏
- MAppBar和MNavigationDrawer提供了非常丰富的控制属性，且可以设置相对位置
2、MAppBar的常用属性
- 位置：
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或ShortFadeImgOnScroll-滚动时淡化背景图（设置了Src属性或ImgContent插槽）ElevateOnScroll-滚动时显示阴影Collapse/CollapseOnScroll-Collapse设置是否折叠、CollapseOnScroll设置滚动时折叠
3、MNavigationDrawer的常用属性
- 位置：
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-还没搞清楚这个遮罩层怎么调出来！！！
4、MAppBar和MNavigationDrawer的相对位置属性，需要结合在一起使用
- 默认情况，MAppBar位于MNavigationDrawer的左侧或右侧
- 将MNavigationDrawer的
Clipped属性设置为true，MAppBar的ClippedLeft或ClippedRight属性设置为true，将MAppBar置于MNavigationDrawer的上侧。如MNavigationDrawer居左，则设置ClippedLeft属性；如居右，则设置ClippedRight属性
四、MBottomNavigation
1、概述
- 底部导航栏，用于手机端导航，是侧边导航栏的替代，所以一般不会和MNavigationDrawer一起使用
- 提供高亮当前选择项的开箱即用功能。
2、常用属性：
- 位置：
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()
