打开MASA Blazor的正确姿势4.1：母版页布局

Posted 2023-03-07 functionMC

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或Short
  • FadeImgOnScroll-滚动时淡化背景图（设置了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()