DOCSEARCHbyAlgolia
Submit Docs

Masa Blazor Pro

repository·main·Indexed 42 days ago

https://github.com/masastack/masa.blazor.pro

A collection of mid-office front-end design solutions and Blazor project templates. It provides preset layouts for dashboards, applications, and common pages such as Login and Registration to accelerate development. Includes the Masa.Template package for CLI installation and support for Blazor Server, WebAssembly, and Razor Class Library (RCL) hosting modes.

Tokens
871
Snippets
4
Records
5
Agent score
5%

What's inside Masa Blazor Pro

  1. Masa Blazor Pro Template Overview

    main

    Masa Blazor Pro provides pre-set layouts for various common business scenarios. The templates include:

    • Dashboard: E-commerce reports.
    • App: Shopping malls, Task management, Invoices, and User management.
    • Page: Login, Registration, Forgot Password, Reset Password, Account Settings, 500 Error, and 401 Unauthorized pages.

  2. Integrate Masa Blazor Pro into an existing project

    main

    To add Masa Blazor Pro to an existing Blazor project, follow these two steps:

    1. Include Stylesheets

    Add the following links to your wwwroot/index.html (for WebAssembly) or Pages/_Host.cshtml (for Server):

    • css/masa-blazor-pro.css: Located in your project's wwwroot/css/ directory.
    • {ASSEMBLY NAME}.styles.css: Replace {ASSEMBLY NAME} with your actual project assembly name to enable CSS isolation.

    2. Configure the MasaBlazor Theme

    Register the MasaBlazor services in your Program.cs and use the UseTheme method to customize colors like Primary and Accent.

    <!-- In wwwroot/index.html or Pages/_Host.cshtml -->
<head>
    <link href="css/masa-blazor-pro.css" rel="stylesheet">
    <link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
</head>
    // In Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMasaBlazor(builder => 
{
    builder.UseTheme(option =>
    {
        option.Primary = "#4318FF";
        option.Accent = "#4318FF";
    });
});

  3. Create a new Masa Blazor Pro project

    main

    Use the dotnet new masabp command to scaffold new projects. You can specify the hosting mode using the --mode flag.

    Available modes:

    • Blazor Server: Default mode.
    • Blazor WebAssembly: Use --mode Wasm.
    • Blazor RCL (Razor Class Library): Use --mode ServerAndWasm to support both Server and WebAssembly.
    # Create Blazor Server project
dotnet new masabp -o Masa.Test

# Create Blazor WebAssembly project
dotnet new masabp --mode Wasm -o Masa.TestWasm

# Create Blazor RCL project
dotnet new masabp --mode ServerAndWasm -o Masa.TestRcl

  5. Configure the MasaBlazor theme

    main

    You can customize the primary and accent colors of the MasaBlazor theme during service registration in your Program.cs file using the AddMasaBlazor extension method.

    var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMasaBlazor(builder => 
{
    builder.UseTheme(option =>
    {
        option.Primary = "#4318FF";
        option.Accent = "#4318FF";
    });
});