打开MASA Blazor的正确姿势2：组件总览

官网文档按拼音罗列组件，且部分嵌套组件没有在导航栏内列出，不利于浏览查阅。本篇文章的主要目的，主要是对所有组件按大家习惯的方式进行分类，简要介绍组件，并建立跳转官方文档的链接。

 

一、导航布局类

---

1、MApp母版页布局：

• MApp：根组件
• MMain：主体内容
• MSystemBar：顶部①，优先级高于MAppBar。作为母版样使用时，需要加App属性
• MAppBar：顶部②，优先级低于MSystemBar。作为母版样使用时，需要加App属性
• MFooter：底部②，优先级低于MBottomNavigation。作为母版样使用时，需要加App属性
• MBottomNavigation：底部①，优先级高于MFooter。作为母版样使用时，需要加App属性
• MNavigationDrawer：侧边栏，可以配置在MAppBar的旁边或下面。作为母版样使用时，需要加App属性

<!-- MainLayout.razor -->
<!-- 母版排版结构，进一步通过Class定义样式 -->
@inherits LayoutComponentBase
<MApp>
  <MNavigationDrawer App>
    <!-- -->
  </MNavigationDrawer>

  <MAppBar App>
    <!-- -->
  </MAppBar>

  <!-- 主体内容 -->
  <MMain>
    <!-- 主体内容包含在MContainer组件内，MContainer布满整个容器 -->
    <MContainer Fluid>
        @Body
    </MContainer>
  </MMain>

  <MFooter App>
    <!-- -->
  </MFooter>
  <MBottomNavigation>
    <!-- -->
  </MBottomNavigation>
</MApp>

2、MSystemBar：顶部状态栏，可以包含文本、图标、MSpacer等

3、MAppBar>MAppBarTitle|MAppBarNavIcon：顶部导航栏，MAppBarTitle为标题，MAppBarNavIcon为图标

4、MToolbarTitle>MToolbarTitle|MAppBarNavIcon：工具栏，MToolbarTitle为标题，MAppBarNavIcon为图标

5、MNavigationDrawer：侧边导航栏（抽屉导航栏）

6、MFooter：底部导航栏

7、MMenu：弹出菜单导航

8、MBreadcrumbs>MBreadcrumbsItem|MBreadcrumbsDivider：面包屑导航

9、PSidebar：侧边栏，由MList、MListGroup、MListItem和MListItemGroup组合而成

 

 

二、页面布局类

---

1、MContainer>MRow>MCol|MSpacer：网格布局

2、使用Class：Flex弹性布局

3、MGridstack：交互式仪表盘

4、MTabs>MTab：选项卡

5、MDivider：分隔线

 

 

三、容器类

---

1、MResponsive：固定宽高比容器

2、MBorder：边框容器

4、MVirtualScroll：虚拟滚动容器

5、MInfiniteScroll：无限滚动容器

 

 

四、单一数据

---

1、MIcon：图标

2、MImage：图片

3、MAvatar：头像

4、MBadge：徽章

5、MSubheader：副标题

6、PBlockText：主次内容文本块

7、PCopyableText：带复制图标的文本

8、MChipGroup>MChip：纸片，即tag标签，可以分组使用

9、PImageCaptch：图片验证码

 

 

五、组合数据

1、MBanner：横幅，由图标、文字和按钮组成的区块

2、MCard>MCardTitle|MCardSubtitle|MCardText|MCardActions：卡片容器，提供丰富的内容组合，并可以结合进度条使用

3、MExpansionPanels>MExpansionPanel>MExpansionPanelHeader|MExpansionPanelContent：折叠面版

4、MStepper：步骤条

5、MTimeline：时间轴

6、MSlideGroup>MSlideItem：幻灯片

7、MWindow>MWindowItem：多窗口显示内容，可以实现幻灯片效果

 

 

五、集合数据

1、MCarousel>MCarouselItem：轮播图

2、MList>MListGroup>MListItem>MListItemContent>MListItemTitle|MListItemIcon：列表，还包括MListItemAvatar、MListItemAction、MListItemActionText组件

3、MTreeview：树形列表

4、MDataIterator>MDataFooter：数据分类显示面板

5、MSimpleTable：简易表格

6、MDataTable：表格数据

7、PPageHeader：表格组件-通用表头

8、MPagination：表格组件-分页

---

 

 

六、表单类

1、MForm：表单

2、MTextField：文本框

3、MTextarea：多行文本框

4、MRadioGroup>MRadio：单选按钮

5、MCheckbox：复选按钮

6、MSelect：下拉选择框

7、MCascader：联级选择框

8、MSwitch：开关

9、MSlider：滑块

10、MRangeSlider：范围滑块

11、MOtpInput：一次性密码输入框

12、MFileInput：文件上传

13、MAutocomplete：自动补全下拉选择框

14、MDatePicker：日期选择器，可切换年/月/日

15、MTimePicker：时间选择器

16、PMobilePicker：移动端选择器

17、PMobileDatePicker：移动端日期选择器

18、PMobileTimePicker：移动端时间选择器

19、PMobileDateTimePicker：移动端日期时间选择器

20、PMobileCascader：移动端联级选择器

21、MRating：评级

22、MEditor：富文本编辑器

23、MMarkdown：Markdown编辑器

24、MButtonGroup>MButton：按钮，可以分组使用

25、MButton>MSpeedDial：浮动按钮

---

 

 

七、窗口类

---

1、MAlert：弹出提示框

2、MDialog ：弹出对话框

3、PModal：弹出模态框

4、MBottomSheet：底部弹出框

5、MSnackbar：底部消息条

6、PToast：底部右侧提示条

7、MTooltip：工具提示

8、MOverlay：遮罩层

9、MSkeletonLoader：骨架屏

10、MProgressLinear：进度条

11、MProgressCircular：进度环

12、@inject IPopupService PopupService：后台调用各类窗口，如PopupService.AlertAsync、PopupService.ConfirmAsync、PopupService.PromptAsync、PopupService.ToastAsync、PopupService.ConfigToast、PopupService.ToastInfoAsync、PopupService.ToastSucessAsync...

 

 

八、其它类

---

1、MHover：使任意子组件显示鼠标悬停

2、PCron：Cron表达式

3、MDragZone>MDragItem：拖放

4、MECharts：图表

5、MErrorHandler：处理组件加载数据或渲染时发生的异常