An Abp Blazor Theme based Ant-Design-Blazor !
Check the samples
The first step is to use ABP CLI to create a new project.
abp new BookStore -u blazor
See the ABP official documentation to learn ABP framework.
Replace LeptonXLiteTheme with AntBlazorTheme packages
- Remove
Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme
Package. - Replace
Volo.Abp.Identity.Blazor.WebAssembly
withLsw.Abp.IdentityManagement.Blazor.WebAssembly.AntDesignUI
- Replace
Volo.Abp.SettingManagement.Blazor.WebAssembly
withLsw.Abp.SettingManagement.Blazor.WebAssembly.AntDesignUI
- Replace
Volo.Abp.TenantManagement.Blazor.WebAssembly
withLsw.Abp.TenantManagement.Blazor.WebAssembly.AntDesignUI
**Open `_Imports.razor` and add with the following:**
```csharp
@using AntDesign
@using Lsw.Abp.AntDesignUI
@using Lsw.Abp.AntDesignUI.Components
@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Layout
Open BookStoreBlazorModule
make the following changes:
- Remove the
ConfigureBlazorise
method - Fix wrong using namespace
- Update module dependencies
- For example, replace
AbpIdentityBlazorWebAssemblyModule
withAbpIdentityBlazorWebAssemblyAntDesignModule
- For example, replace
Open BookStoreMenuContributor
to update icon:
"fas fa-home"
toIconType.Outline.Home
"fa fa-cog"
toIconType.Outline.Setting
Open Index.razor
and replace with the following:
@page "/"
@inherits BookStoreComponentBase
<AbpPageHeader Title="Index"></AbpPageHeader>
<div class="page-content">
<div style="text-align: center">
<Alert Type="@AlertType.Success"
Message="Success"
Description=" Congratulations, BookStore is successfully running!"
ShowIcon="true"/>
<Divider/>
</div>
</div>
Run the dotnet build
& abp bundle
command in the BookStore.Blazor
folder.
That's all, enjoy your code :).
Updating...