Masa Blazor自定义组件封装

MASA team

于 2022-05-06 15:26:45 发布

阅读量697

点赞数

CC 4.0 BY-SA版权

分类专栏： MASA Blazor 文章标签：后端 c# .net 微软

本文链接：https://blog.youkuaiyun.com/MASAteam/article/details/124611263

前言

实际项目中总能遇到一个"组件"不是基础组件但是又会频繁复用的情况,在开发MASA Auth时也封装了几个组件。既有简单定义CSS样式和界面封装的组件（GroupBox），也有带一定组件内部逻辑的组件(ColorGroup)。
本文将一步步演示如何封装出一个如下图所示的ColorGroup组件,将MItemGroup改造为ColorGroup,点击选择预设的颜色值。

MASA Blazor介绍

组件展示

MASA Blazor 提供丰富的组件（还在增加中）,篇幅限制下面展示一些我常用到的组件

Material Design + BlazorComponent

BlazorComponent是一个底层组件框架，只提供功能逻辑没有样式定义，MASA Blazor就是BlazorComponent基础实现了Material Design样式标准。如下图所示，你可以基于Ant Design样式标准实现一套Ant Design Blazor(虽然已经有了，如果你想这么做完全可以实现)。

项目创建

首先确保已安装Masa Template（避免手动引用MASA Blazor）,如没有安装执行如下命令:

dotnet new --install Masa.Template

创建一个简单的Masa Blazor Server App项目：

dotnet new masab -o MasaBlazorApp

组件封装

Blazor组件封装很简单，不需要和vue一样进行注册，新建一个XXX.razor组件就是实现了XXX组件的封装，稍微复杂些的是需要自定义组件内部逻辑以及定义开放给用户（不同的使用场景）的接口（参数），即根据需求增加XXX.razor.cs和XXX.razor.css文件。

界面封装

在熟悉各种组件功能的前提下找出需要的组件组装起来简单实现想要的效果。这里我使用MItemGroup、MCard及MButton实现ColorGroup的效果。MItemGroup做颜色分组，且本身提供每一项激活的功能。MCard 作为颜色未选择之前的遮罩层，实现模糊效果。MButton作为颜色展示载体及激活MItem。通过MCard的style设置透明度区分选中、未选中两种状态。

也可通过增加一个对比色的圆形边框标记选中状态，相关CSS参考：https://www.dailytoolz.com/css-border-radius-generator/

新建ColorGroup.Razor文件，代码如下：

<MItemGroup Mandatory Class="m-color-group d-flex mx-n1">
    <MItem>
        <MCard Class="elevation-0" Style="@($"transition: opacity .4s ease-in-out; {(context.Active ? "" : "opacity: 0.5;")}")">
            <MButton Fab class="mx-1 rounded-circle" OnClick="context.Toggle"
                     Width=20 Height=20 MinWidth=20 MinHeight=20 Color="red">
            </MButton>
        </MCard>
    </MI