ant-design-blazor / blazor-pro-components

Pro Components of Blazor. 🏆 Use Ant Design like a Pro!

English | 简体中文

Ant Design Pro Layout

An out-of-box UI solution for enterprise applications as a React boilerplate. This repository is the layout of Ant Design Pro and was developed for quick and easy use of the layout.

Usage

Install-Package AntDesign.Pro.Layout
// or
dotnet add package AntDesign.Pro.Layout

builder.Services.AddAntDesign();
builder.Services.Configure<ProSettings>(x =>
{
    x.Title = "Ant Design Pro";
    x.NavTheme = "light";
    x.Layout = "mix";
    x.PrimaryColor = "daybreak";
    x.ContentWidth = "Fluid";
    x.HeaderHeight = 64;
});

Or setup with appsettings.json

builder.Services.AddAntDesign();
builder.Services.Configure<ProSettings>(builder.Configuration.GetSection("ProSettings"));

{
  "ProSettings": {
    "NavTheme": "light",
    "Layout": "mix",
    "ContentWidth": "Fluid",
    "FixedHeader": false,
    "FixSiderbar": true,
    "Title": "Ant Design Pro",
    "PrimaryColor": "daybreak",
    "ColorWeak": false,
    "SplitMenus": false,
    "HeaderRender": true,
    "FooterRender": true,
    "MenuRender": true,
    "MenuHeaderRender": true,
    "HeaderHeight": 64
  }
}

• Link the static files in wwwroot/index.html (WebAssembly) or Pages/_Host.cshtml (Server)

<link rel="stylesheet" href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" />

❓ Community Support

If you encounter any problems in the process, feel free to ask for help via following channels. We also encourage experienced users to help newcomers.

• 

• 

  Scan QR Code with DingTalk

  

Code of Conduct

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the .NET Foundation Code of Conduct.

☀️ License

.NET Foundation

This project is supported by the .NET Foundation.