MASA.Blazor企業(yè)級(jí) UI 組件庫(kù)
MASA.Blazor 是一套基于Material設(shè)計(jì)規(guī)范和BlazorComponent的交互能力提供標(biāo)準(zhǔn)的基礎(chǔ)組件庫(kù)。
MASA.Blazor 提供如布局、彈框標(biāo)準(zhǔn)、Loading、全局異常處理等標(biāo)準(zhǔn)場(chǎng)景的預(yù)置組件。從更多實(shí)際場(chǎng)景出發(fā)，滿(mǎn)足更多用戶(hù)和場(chǎng)景的需求，最大的減少開(kāi)發(fā)者的時(shí)間成本?？s短開(kāi)發(fā)周期提高開(kāi)發(fā)效率。并提供一套Web解決方案示例 - MASA Blazor Pro 有多種常見(jiàn)場(chǎng)景和預(yù)設(shè)布局等精彩內(nèi)容。
特性
- 豐富組件：包含Vuetify 1:1還原的基礎(chǔ)組件，以及很多實(shí)用的預(yù)置組件和.Net深度集成功能，包括Url、面包屑、導(dǎo)航三聯(lián)動(dòng)，高級(jí)搜索，i18n等
- UI設(shè)計(jì)語(yǔ)言：設(shè)計(jì)風(fēng)格現(xiàn)代，UI 多端體驗(yàn)設(shè)計(jì)優(yōu)秀
- 專(zhuān)業(yè)示例：MASA Blazor Pro 提供多種常見(jiàn)場(chǎng)景的預(yù)設(shè)布局
- 簡(jiǎn)易上手：豐富詳細(xì)的上手文檔，免費(fèi)的視頻教程（制作中）
- 社區(qū)活躍鼓勵(lì)：用戶(hù)參與實(shí)時(shí)互動(dòng)，做出貢獻(xiàn)加入我們，構(gòu)建最開(kāi)放的開(kāi)源社區(qū)
- 長(zhǎng)期支持：全職團(tuán)隊(duì)維護(hù)，長(zhǎng)期提供支持，并提供企業(yè)級(jí)支持
- 知名企業(yè)選擇：該技術(shù)框架被多家知名企業(yè)選擇使用，未來(lái)MASA Stack產(chǎn)品線(xiàn)也將一直使用，持續(xù)增加新功能
統(tǒng)計(jì)
快速使用
開(kāi)發(fā)環(huán)境搭建
CLI
Install Template
dotnet new --install Masa.Template
Create 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.TestRcl
Go to the Server project directory
cd Masa.Test\Masa.Test.Server
Run
dotnet run
現(xiàn)有項(xiàng)目
- 安裝Nuget包
dotnet add package Masa.Blazor
- 將 Masa.Blazor 的相關(guān)服務(wù)添加到
Startup.ConfigureServices:
services.AddMasaBlazor();
- 在
wwwroot/index.html(WebAssembly) 或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>
- 在
_Imports.razor文件中加入命名空間:
@using Masa.Blazor @using BlazorComponent
- 修改
Shared/MainLayout.razor文件，讓MApp成為根元素：
<MApp> //其它布局內(nèi)容 </MApp>
本地開(kāi)發(fā)
開(kāi)發(fā)環(huán)境搭建
克隆代碼
git clone [email protected]:BlazorComponent/Masa.Blazor.git cd Masa.Blazor/src git clone [email protected]:BlazorComponent/BlazorComponent.git
運(yùn)行文檔站點(diǎn)
cd Doc/Masa.Blazor.Doc.Server dotnet run
訪問(wèn)
推薦使用 chrome 或 edge 訪問(wèn) http://localhost:5000/
評(píng)論
圖片
表情