（三）使用MASA Blazor开发Web应用 ——布局与主题

一、组件介绍

　　在MASA中关于布局系统的文档，里面有完整的资料，此博文以及后续都只列出文中使用的进行效果展示与说明

　　组件：

MSpacer：MSpacer 是一个基本而又通用的间隔组件，用于分配父子组件之间的剩余宽度。当一个 MSpacer 放置在子组件之前或之后时，组件将推到其容器的左右两侧。当多个组件之间使用多个 MSpacer 时，剩余的宽度将均匀地分布在每个 spacer 之间。
MAppBar 头部，组件用于应用程序范围内的操作和信息。
MNavigationDrawer 侧边菜单栏，是用于导航应用程序的组件，存放您应用程序中页面的链接。通常使用 Nav 属性将抽屉与 MList 组件配对使用
MMain 主窗体内容，与MAppBar、MNavigationDrawer 三个组件组成一个应用布局。

　　属性：

MList：Linkage 联动属性，在选中侧边菜单栏点开页面后，刷新并不会重置选中的值

二、新建项目

　　1.布局：　在创建项目之后，直接F5运行就行

代码如下：

 1 <MApp>
 2     <MAppBar Flat App Color="white" Class="m-bar--underline">
 3         <span>Masa.Framework</span>
 4         <MSpacer></MSpacer>
 5         <MButton Text>
 6             <a href="https://blazor.masastack.com/">About</a>
 7         </MButton>
 8     </MAppBar>
 9     <MNavigationDrawer Permanent App>
10         <MList Dense Nav>
11             <MListItem Link Href="/">
12                 <MListItemContent>
13                     <MListItemTitle>Home</MListItemTitle>
14                 </MListItemContent>
15             </MListItem>
16             <MListItem Link Href="counter">
17                 <MListItemContent>
18                     <MListItemTitle>Counter</MListItemTitle>
19                 </MListItemContent>
20             </MListItem>
21             <MListItem Link Href="fetchdata">
22                 <MListItemContent>
23                     <MListItemTitle>Fetch data</MListItemTitle>
24                 </MListItemContent>
25             </MListItem>
26         </MList>
27     </MNavigationDrawer>
28     <MMain>
29         <MContainer Fluid>
30             <CascadingValue Value="this">
31                 @Body
32             </CascadingValue>
33         </MContainer>
34     </MMain>
35 </MApp>

此时，一个框架起来后，接下来我准备修改一下主题，配置主题色。

　　2.主题：在Program中，AddMasaBlazor()，提供了Theme主题颜色修改入口，我们可以配置Primary，Warning，Error，Success等信息，我将主色调设置为橙色，至于支持的颜色值，在这里可以进行查询：Color颜色https://blazor.masastack.com/stylesandanimations/colors

var builder = WebApplication.CreateBuilder(args);

//builder.Services.AddMasaBlazor();
builder.Services.AddMasaBlazor(options =>
{
    options.Theme.Primary = "orange";

});

使用方式：在组件上使用设置Color属性， Color="primary" 即可，下图可以看到，不光是菜单列表，包括其他的颜色都从蓝色变成橙色

　　3.选中样式：Linkage，在MList增加联动属性：Linkage

    <MNavigationDrawer Permanent App>
        <MList Dense Linkage Nav >
            <MListItem Link Href="/" Color="primary">
                <MListItemContent>
                    <MListItemTitle>Home</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Link Href="counter" Color="primary" >
                <MListItemContent>
                    <MListItemTitle>Counter</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Link Href="fetchdata" Color="primary">
                <MListItemContent>
                    <MListItemTitle>Fetch data</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Link Href="/" Color="primary">
                <MListItemContent>
                    <MListItemTitle>Fetch data</MListItemTitle>
                </MListItemContent>
            </MListItem>
        </MList>
    </MNavigationDrawer>

可以看到，当我点击每个菜单时，都会添加一个选中效果，并且刷新页面，并不会重置或者收起。

但是其中有个问题，当我点击Home或者最后一个Fetch data菜单时，都会同时选中，这就是因为 Linkage 属性是通过 Href 来进行联动

4.MSpacer

这个组件的作用就是布局，自动将他两边的组件移动到边上，左边或者右边

    <MAppBar Flat App Color="white" Class="m-bar--underline">
        <span>Masa.Framework</span>
        <MSpacer></MSpacer>
        <MButton Text>
            <a href="https://blazor.masastack.com/">About</a>
        </MButton>
    </MAppBar>

以Bar栏中的内容举例，<span>与MButton都在两边

在将span标签移动到MSpacer右边，查看效果

    <MAppBar Flat App Color="white" Class="m-bar--underline">
        <MSpacer></MSpacer>
        <span>Masa.Framework</span>
        <MButton Text>
            <a href="https://blazor.masastack.com/">About</a>
        </MButton>
    </MAppBar>