如何使用MASA.Blazor

tokengo發表於2023-01-28
Blazor

MASA.Blazor 是什麼？

基於Material Design設計和BlazorComponent的互動能力提供標準的基礎元件庫。提供如佈局、彈框標準、Loading、全域性異常處理等標準場景的預置元件。從更多實際場景出發，滿足更多使用者和場景的需求，縮短開發週期，提高開發效率，並提供一整套Web解決方案 - MASA Blazor Pro。

MASA.Blazor.Pro演示地址 這裡

效果圖：這是一個基於MASA.Blazor實現的商城的效果圖

使用MASA.Blazor

安裝MASA.Blazor 的NuGet包

dotnet add package Masa.Blazor

引用專案資源

Blazor Server模式下在Pages/_Layout檔案中引入以下資原始檔：

<!-- masa blazor css style -->
<link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet" />

<!--圖示檔案 匯入的時候引用-->
<link href="https://cdn.masastack.com/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">

<!--應放在檔案末尾-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>

Blazor WebAssembly 模式下在wwwroot/index.html檔案中引入以下資原始檔：

<!-- masa blazor css style -->
<link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet" />

<!--圖示檔案 匯入的時候引用-->
<link href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">

<!--應放在檔案末尾-->
<script src="_content/BlazorComponent/js/blazor-component.js"></script>

注入MASA.Blazor相關服務

// 向容器中新增服務
builder.Services.AddMasaBlazor();

新增全域性引用

修改_Imports.razor檔案，新增以下內容：

@using Masa.Blazor
@using BlazorComponent

修改Shared/MainLayout.razor檔案，設定MApp為根元素：

<MApp> //layout </MApp>
  • 注：如果出現元件樣式丟失檢視元件是否渲染在MApp內，需要渲染在MApp內才保證樣式正確性

簡單使用

在 index.razor中新增以下程式碼

<MCard Class="overflow-hidden">
    <MAppBar Absolute
             Color="#6A76AB"
             Dark
             ShrinkOnScroll
             Prominent
             Src="https://picsum.photos/1920/1080?random"
             FadeImgOnScroll
             ScrollTarget="#scrolling-sheet-3">
        <ImgContent>
            <MImage Gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)" @attributes="@context"></MImage>
        </ImgContent>

        <ChildContent>
            <MAppBarNavIcon></MAppBarNavIcon>
            <MAppBarTitle>Title</MAppBarTitle>
            <MSpacer></MSpacer>

            <MButton Icon>
                <MIcon>mdi-magnify</MIcon>
            </MButton>
            <MButton Icon>
                <MIcon>mdi-heart</MIcon>
            </MButton>
            <MButton Icon>
                <MIcon>mdi-dots-vertical</MIcon>
            </MButton>

        </ChildContent>
        <ExtensionContent>
            <MTabs AlignWithTitle>
                <MTab>Tab 1</MTab>
                <MTab>Tab 2</MTab>
                <MTab>Tab 3</MTab>
            </MTabs>
        </ExtensionContent>
    </MAppBar>

    <MSheet Class="overflow-y-auto" MaxHeight="600" Id="scrolling-sheet-3">
        <MContainer Style="height: 1000px;"></MContainer>
    </MSheet>
</MCard>

效果展示（程式碼效果在Blazor Code快速預覽）：

結尾

MASA.Blazor是一個ui更貼近現代化的一款Blazor UI元件也提供了MASAStack這種框架級別

歡迎更多喜歡Blazor的加入MASA.Blazor

友鏈：

MASA.Blazor Blazor UI元件

線上編輯器 內建MASA.Blazor元件，可本地快速預覽Blazor元件功能

來自token的分享

Blazor技術交流群：452761192

相關文章