This issue recommends MASA Blazor, a base component library that provides standards based on the Material design specification and the interaction capabilities of BlazorComponent.
MASA Blazor is a standard base component library based on the Material design specification and the interaction capabilities of BlazorComponent. Provides preset components for standard scenarios such as layout, popover standards, Loading, and global exception handling. Starting from more actual scenarios, meet the needs of more users and scenarios, and minimize the time cost of developers.
class=”pgc-h-arrow-right” data-track=”5″>
- Use C# instead of JavaScript to create informative interactive UI
- Share server-side and client-side application logic written in.NET
- Render UI as HTML and CSS to support many browsers, including mobile
- Integration with new hosting platforms (such as Docker)
- Write code in C# instead of JavaScript
- Leveraging the existing.NET library ecosystem
- Share application logic between server and client
- Benefit from.NET performance, reliability, and security
- Stay productive with Visual Studio on Windows, Linux, and macOS
- is based on a stable, feature-rich, and easy-to-use set of common languages, frameworks, and tools for generating
class=”pgc-h-arrow-right” data-track=”20″>
dependent environment
- Install. NET SDK 6.0
- Install Visual Studio Code or Visual Studio 2022
development environment setup
Install:
dotnet new --install Masa.TemplateCreate project:
dotnet new masabp -o Masa.Test- Blazor WebAssembly
dotnet new masabp --mode Wasm -o Masa.TestWasm- Blazor RCL
dotnet new masabp --mode ServerAndWasm -o Masa.TestRclRun:
cd Masa.Test\Masa.Test.Serverdotnet run
Existing items
Install Nuget package:
dotnet add package Masa.Blazor< p data – track = “40” > to Masa. Blazor related services added to the Startup. ConfigureServices: < / p >
services.AddMasaBlazor(); Introduce styles, fonts, scripts in wwwroot/index.html(WebAssembly) or Pages/_Host.cshtml(Server) :
<html lang="en">
<head>
<!--Style-->
<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet">
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet">
<!--Font-->
<link href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/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">
</head>
<body>
<!--Script (try to put it at the end of the body)-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
</body>
</html>Add namespace to _Imports.razor file :
@using Masa.Blazor
@using BlazorComponentModify the Shared/MainLayout.razor file to make MApp the root element:
< MApp>
// Other layout content
</MApp>class=”pgc-h-arrow-right” data-track=”100″> Browser support
|
browser name |
Support status |
|
Chromium (Chrome, Edge Insider) |
Support |
|
Edge |
Support |
|
Firefox |
Support |
|
Safari 10+ |
Support |
|
IE11/Safari 9 |
Support (polyfill) |
|
IE9 / IE10 |
Not supported |
Sample component
Alert
@using AlertTypes = BlazorComponent.AlertTypes
<div>
<MAlert Dense
Type="AlertTypes.Info">
I'm a dense alert with a <strong>type</strong> of info
</MAlert>
<MAlert Dense
Text
Type="AlertTypes.Success">
I'm a dense alert with the <strong>text</strong> prop and a <strong>type</strong> of success
</MAlert>
<MAlert Dense
Border="Borders.Left"
Type="AlertTypes.Warning">
I'm a dense alert with the <strong>border</strong> prop and a <strong>type</strong> of warning
</MAlert>
<MAlert Dense
Outlined
Type="AlertTypes.Error">
I'm a dense alert with the <strong>outlined</strong> prop and a <strong>type</strong> of error
</MAlert>
</div>Avatar Picture of head
<div class="text-center" style="width:100%">
<MAvatar Color="primary" Size="56">
<span class="white--text">VJ</span>
</MAvatar>
</div>Button Push button
<div class="text-center">
<MButton class="mx-2"
Fab
Small
Dark
Color="primary">
<MIcon>
mdi-minus
</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Small
Dark
Color="pink">
<MIcon>mdi-heart</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Color="indigo">
<MIcon>mdi-plus</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Color="teal">
<MIcon>mdi-format-list-bulleted-square</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Large
Color="cyan">
<MIcon>mdi-pencil</MIcon>
</MButton>
<MButton class="mx-2"
Fab
Dark
Large
Color="purple">
<MIcon>
mdi-android
</MIcon>
</MButton>
</div>Dialog 对话框
<MRow Justify="JustifyTypes.SpaceAround">
<MCol Cols="@("auto")">
<MDialog @bind-Value="dialog"
Transition="dialog-bottom-transition"
MaxWidth="600">
<ActivatorContent>
<MButton Color="primary"
@attributes="@context.Attrs">
From the bottom
</MButton>
</ActivatorContent>
<ChildContent>
<MCard>
<MToolbar Color="primary"
Dark>
Opening from the bottom
</MToolbar>
<MCardText>
<div class="text-h2 pa-12">Hello world!</div>
</MCardText>
<MCardActions Class="justify-end">
<MButton Text
OnClick="() => dialog = false">
Close
</MButton>
</MCardActions>
</MCard>
</ChildContent>
</MDialog>
</MCol>
</MRow>Tab TAB TAB
<MCard>
<MTabs BackgroundColor="deep-purple accent-4" CenterActive Dark>
<MTab>One</MTab>
<MTab>Two</MTab>
<MTab>Three</MTab>
<MTab>Four</MTab>
<MTab>Five</MTab>
<MTab>Six</MTab>
<MTab>Seven</MTab>
<MTab>Eight</MTab>
<MTab>Nine</MTab>
<MTab>Ten</MTab>
<MTab>Eleven</MTab>
<MTab>Twelve</MTab>
<MTab>Thirteen</MTab>
<MTab>Fourteen</MTab>
<MTab>Fifteen</MTab>
<MTab>Sixteen</MTab>
<MTab>Seventeen</MTab>
<MTab>Eighteen</MTab>
<MTab>Nineteen</MTab>
<MTab>Twenty</MTab>
</MTabs>
</MCard>Reference for more sample components:
https://blazor-wasm.masastack.com/components/alerts
—END—
Open source protocol: MIT
