MASA Blazor
is a Blazor
library of UI components. Just like Bootstrap and Ant Design, which are familiar to everyone in front-end writing.
MASA Blazor official website address: https://blazor.masastack.com MASA Blazor Github address: https://github.com/BlazorComponent/MASA.Blazor MASA Blazor Pro demo address: https://blazor-pro.masastack.com/ dashboards/ ecommerce MASA Blazor Pro Github address: https://github.com/BlazorComponent/MASA.Blazor.Pro
What is Blazor
Before the introduction MASA Blazor
, it is necessary to know what it is Blazor
. If you already know what it is, you Blazor
can skip it directly and continue reading below.
Blazor
It is a framework that uses .NET to generate interactive client-side Web UI. Blazor
Using C#, developers can code on the server and client-side to build rich Web applications. Does it sound very good? Back-end partners who are not familiar with front-end development languages can also use it Blazor
for web application development. Just take a look at the official description.
If you want to know more about Blazor
it, you can read this article , which introduces in great detail what is Blazor and how Blazor compares with other front-end technologies. Or you can go directly to the official documentation , I will not elaborate too much here.
Material Design
After understanding , Blazor
let’s briefly understand Material Design
why Material Design
, because it MASA Blazor
is based on Material Design
design.
Introduction:Material Design
, Chinese name: Material design language, some people also call it texture design, is a cross-platform design language launched by Google, which aims to provide a highly consistent user experience and visual experience for mobile phones, tablets, desktops and "other platforms" Effect.
Pros:Material Design
Contains suggestions on how to use shadows, how to use animations, and even how many pixels to use when designing, it can help us build a more reasonable page structure, how to typography, font size and spacing, it defines elegance Smooth interaction effects guide the user's visual focus and interaction in the page.
Material Design
The core is simplicity. Big and simple, simple and refined. It brings the experience of the physical world to the screen. Remove impurities and randomness in reality, retain its most original and pure form, spatial relationship, changes and transitions, and cooperate with the flexible characteristics of the virtual world to restore the most realistic experience to achieve a concise and intuitive effect. Of course its advantages don't stop there. Many overseas applications, including a large number of web sites, are based on the design of MD. It is still very popular abroad. If you want to know more about MD, you can go to its official website , which will be introduced here first.
Vuetify
Vuetify
It is a VueUI framework that is very popular in the world. It is a complete interface framework built on Vue.js. Unlike other frameworks. Vuetify
Designed from the ground up to be easy to learn and has hundreds of well-designed components from the Material Design Specification . Vuetify
A mobile-first design means your app works right out of the box, whether it's on a phone, tablet, or desktop.
Therefore vue
, the small partners who use Vuetify
it can easily build a set Material Design
of applications based on design style.
Isn't it cool? Having said so much, it's all about the front-end of others, so do we Blazor
have such a UI component library? The answer is of course there is, that is MASA Blazor
. Finally it's our protagonist's turn.
MASA Blazor
MASA Blazor
As mentioned at the beginning, it is Blazor
a UI component library that Blazor
frees you from JavaScript
web application development, and MASA Blazor
allows you to build a very beautiful web application without writing, or writing very little Css. MASA Blazor
It is a UI component library carefully designed in strict accordance with Material Design的
design specifications. Next, let's talk about his advantages.
- Based on
Material Design
the design style, it hasMaterial Design
all the design advantages, and the multi-terminal experience, interaction and operation are excellent. - With
Blazor
deep integration, back-end developers can easily get started. - Innately responsive, in addition to
Vuetify
some components, there are many preset components such as Url, breadcrumbs, navigation triple linkage, advanced search, i18n, etc. - Active community, easy to use, full-time team maintenance
MASA Blazor
All the components that have been deeply Vuetify
restored, besides 1:1 restoration, a very practical preset component has been added, and some commonly used components or a group of components are encapsulated, which is more suitable for the daily use of developers and greatly reduces the development time. time, increasing the efficiency of development. He also solves most of the back-end human tuning troubles. A few lines of code can quickly build a beautiful page. Then let's take a look at how Blazor
to introduce it in the project.
Using MASA Blazor
-
Environment: .NET 6.0.0 + Visual Studio 2022
-
Create
Blazor Server
an appdotnet new blazorserver -o BlazorServerApp
-
Add MASA.Blazor package
You can use the Nuget package management tool to search
MASA.Blazor
and add, or you can directlydotnet add package MASA.Blazor
-
Masa Blazor
Add related services in Program.cs .builder.Services.AddMasaBlazor();
The .net 6.0 Minimal Api is used here without the Startup class. The code also looks simpler. If it is the previous .net version, just
Startup.ConfigureServices
addservices.AddMasaBlazor();
it there. -
Introduce styles, fonts, scripts in Pages/_Layout.cshtml
Add styles and fonts to the head
<link href="_content/MASA.Blazor/css/masa-blazor.css" rel="stylesheet"> <link href="_content/MASA.Blazor/css/masa-extend-blazor.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@("@mdi")/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
Add js script at the bottom of body
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
If it is a version before .net6.0, these codes are in Pages/_Host.cshtml(Server)
-
Reference in the _Imports.razor file
MASA.Blazor
,BlazorComponent
obviously space, so that we don't have to refer to each file@using MASA.Blazor @using BlazorComponent
-
Replace the content in Shared/MainLayout.razor
<MApp> @Body </MApp>
Quickly create Blazor projects using templates
After the above steps, you can MASA Blazor
develop based on it. But are the steps a little more and a little complicated? Of course, these MASA Blazor
are also considered for us, so it provides a simpler installation method, which is installed through templates.
-
Install the template via dotnet command
dotnet new --install MASA.Template
-
Create a Blazor Server project based on the MASA Blazor Component Library
dotnet new masab -o BlazorServerApp
It's done in two easy steps. The project created in this way will help you complete the above steps.
Show results
Next, we will replace the original demo components with the sidebar and top toolbar of MASA Blazor. Some code screenshots:
The
MNavigationDrawer
andMAppBar
two components are used.
The effect diagram is as follows:
There are also many beautiful and interesting components with examples and code on the official website, such as this AppBar
:
Click to view the source code, then copy the code over, and a component is complete.
Take a look at the effect:
It's that simple.
Let's take a look at the MASA Blazor Pro
effect of the official Admin template ( ):
MASA Blazor Pro demonstrates the use of most MASA Blazor components. And it is an out-of-the-box back-end front-end admin template. All are open source and free. Interested friends can go to find out.
MASA Blazor official website address: https://blazor.masastack.com MASA Blazor Github address: https://github.com/BlazorComponent/MASA.Blazor MASA Blazor Pro demo address: https://blazor-pro.masastack.com/ dashboards/ ecommerce MASA Blazor Pro Github address: https://github.com/BlazorComponent/MASA.Blazor.Pro
We are in action, new framework, new ecology
Our goals are 自由的
, 易用的
, 可塑性强的
, 功能丰富的
, 健壮的
.
So we draw on the design concept of Building blocks and are making a new framework MASA Framework
. What are its characteristics?
- Natively supports Dapr and allows replacing Dapr with traditional communication methods
- Unlimited architecture, monolithic applications, SOA, and microservices are supported
- Support .Net native framework, reduce learning burden, and insist not to create new wheels except for concepts that must be introduced in specific fields
- Rich ecological support, in addition to the framework, there are a series of products such as component library, authorization center, configuration center, troubleshooting center, and alarm center
- Unit test coverage of core code base is 90%+
- Open source, free, community driven
- What else? We are waiting for you, let's discuss together
After several months of production project practice, the POC has been completed, and the previous accumulation is currently being refactored into a new open source project
At present, the source code has begun to be synchronized to Github (the documentation site is under planning and will be gradually improved):
QQ group: 7424099
WeChat group: add technology operation WeChat (MasaStackTechOps), note your intention, invite to join the group
------ END ------
About the Author
Yan Pengju: Member of the MASA technical team.