如何封装Masa Blazor中的自定义组件?

2026-05-06 05:100阅读0评论SEO基础
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计2866个文字,预计阅读时间需要12分钟。

如何封装Masa Blazor中的自定义组件?

前言+实际项目中总会遇到一个组件不是基础组件但又会频繁重复使用的情况,在开发MASA+Auth时也封装了几个组件。已有简单定义CSS样式和界面封装的组件(GroupBox),也有带一定组件内部的封装组件。

前言

实际项目中总能遇到一个"组件"不是基础组件但是又会频繁复用的情况,在开发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(虽然已经有了,如果你想这么做完全可以实现)。

阅读全文

本文共计2866个文字,预计阅读时间需要12分钟。

如何封装Masa Blazor中的自定义组件?

前言+实际项目中总会遇到一个组件不是基础组件但又会频繁重复使用的情况,在开发MASA+Auth时也封装了几个组件。已有简单定义CSS样式和界面封装的组件(GroupBox),也有带一定组件内部的封装组件。

前言

实际项目中总能遇到一个"组件"不是基础组件但是又会频繁复用的情况,在开发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(虽然已经有了,如果你想这么做完全可以实现)。

阅读全文