AntBlazor Theme in ABP Framework

introduce

ABP abstracts the theme system. It is very simple to change the existing UI to other UI frameworks. This paper introduces how to switch the theme to ant razor theme.The source code and examples are open source in GitHub。

Lsw. Abp. The ant design UI project has nothing to do with the official ABP. It is a community project.

What are ant blazor and LSW Abp. AntDesignUI

Ant blazor, full name of Ant Design blazor, is a popularCommunity project, which is more in line with Chinese aesthetics and is used to create beautiful and high-performance blazor applications.

Lsw.Abp.AntDesignUIIt is an ABP front-end theme project based on Ant Design razor, which completely replaces all pages of the basic theme.

Create a new ABP solution

Create a blazor application using the ABP cli command:

abp new BookStore -u blazor

If ABP cli is not installed, use the following command to install it:

dotnet tool install -g Volo.Abp.Cli

The solution is shown in the figure below:

Replace default theme pack

ABP uses blazorise as the UI framework by default, and creates a set of basic themes based on itLsw.Abp.AntDesignUIReplace the basic theme

openBookStore.Blazor.csprojReplace the file with the following:

net6.0
    true

Change import file

open_Imports.razorThe file replaces the reference prompting an error with the following reference:

@using AntDesign
@using Lsw.Abp.AntDesignUI
@using Lsw.Abp.AntDesignUI.Components
@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Layout

Change blazor project

Bookstoreblazormodule module class

1. Delete the configureblazorise method

2. Fix the wrong command space reference according to the IDE prompt

3. Replace module dependencies, such asAbpIdentityBlazorWebAssemblyModuleReplace withAbpIdentityBlazorWebAssemblyAntDesignModule

Update Icon

Open menu configuration classBookStoreMenuContributor:

• "fas fa-home"Change toIconType.Outline.Home
• "fa fa-cog"Change toIconType.Outline.Setting

Update index page

Replace with the following codeIndex.razor:

@page "/"
@inherits BookStoreComponentBase

Update static resource package

stayBookStore.BlazorOpen the project directory and run terminaldotnet build & abp hundleOrders,abp bundleUsed to update bundled resources

All done

useBookStore.DbMigratorCreate database and initialize seed data, runBookStore.HttpApi.HostandBookStore.BlazorProject, you will see the following page: