Free Blazor wams layouts which integrated with Abp VNext
It's a Blazor wasm front end layout solution for Abp VNext Blazor projects. Abp VNext provides free Blazor solution. But the free layout is a defult MVC layout. You have to pay for the enteprise layouts from Abp VNext. TF.Abp.Blazor.Layout will provide free enteprise layout which integrated with Abp VNext backend. And you can implement a buitful layout by referecing a Nuget package and adding little code.
You can find the project code on github. It's free and open source. https://github.com/TFInfoTech/TF.Abp.Blazor.Layout
Solution is generated by Abp CLI.
Update _Imports.razor. Add using statement.
@using TF.Abp.Blazor.Layout.AntDesignTheme
Update <ProjectName>Module.cs
[DependsOn(
typeof(AbpAutofacWebAssemblyModule),
typeof(LayoutHttpApiClientModule),
typeof(TFAbpBlazorAntDesignThemeModule),//To be added for TF AntDesign Theme
typeof(AbpIdentityBlazorModule),
typeof(AbpTenantManagementBlazorModule)
)]
public override void ConfigureServices(ServiceConfigurationContext context)
{
var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>();
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
ConfigureAuthentication(builder);
ConfigureHttpClient(context, environment);
ConfigureBlazorise(context);
ConfigureAntDesign(context, builder); //To be added for TF AntDesign Theme
ConfigureRouter(context);
ConfigureUI(builder);
ConfigureMenu(context);
ConfigureAutoMapper(context);
}
private void ConfigureAntDesign(ServiceConfigurationContext context, WebAssemblyHostBuilder builder)
{
context.Services.AddAntDesign();
context.Services.Configure<ProSettings>(builder.Configuration.GetSection("ProSettings"));
context.Services.Configure<TFAntDesignSettings>(builder.Configuration.GetSection("TFAntDesignSettings"));
}
Update the menu icon in <ProjectName>MenuContributor.cs
private Task ConfigureMainMenuAsync(MenuConfigurationContext context)
{
var l = context.GetLocalizer<LayoutResource>();
context.Menu.Items.Insert(
0,
new ApplicationMenuItem(
"Layout.Home",
l["Menu:Home"],
"/",
icon: "home" //To be update for TF AntDesign Theme
)
);
context.Menu.GetAdministration().Icon = "setting"; //To be added for TF AntDesign Theme
return Task.CompletedTask;
}
Add settings to appsetting.json
"ProSettings": {
"NavTheme": "dark",
"Layout": "side",
"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": 48
},
"TFAntDesignSettings": {
"IsDisplaySearch": true,
"IsDisplayHelp": true
}
Add css and js to Index.html
<!--TF:Styles must here-->
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<link href="_content/AntDesign.Pro.Layout/css/ant-design-pro-layout-blazor.css" rel="stylesheet" />
<link href="_content/TF.Abp.Blazor.Layout.AntDesignTheme/libs/abp/css/theme.css" rel="stylesheet" />
<!--/TF:Styles-->
<!--ABP:Styles-->
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
<link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet" />
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/flag-icon/css/flag-icon.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
<!--/ABP:Styles-->
<!--TF:Styles must here-->
<link href="_content/TF.Abp.Blazor.Layout.AntDesignTheme/libs/tf/css/compatible.css" rel="stylesheet" />
<!--/TF:Styles-->
<!--ABP:Scripts-->
<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly/libs/abp/js/abp.js"></script>
<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<!--/ABP:Scripts-->
<!--TF:Scripts-->
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
<!--TF:Scripts-->
You can reference the Theme by install the package to your Blazor wasm project.
You also can reference the project code if you want to customize the layout.
Abp reference the Blazorize by defult. So You just need to reference the layout and add necessary dependency.
@using TF.Abp.Blazor.Layout.BlazoriseTheme
[DependsOn(
typeof(AbpAutofacWebAssemblyModule),
typeof(LayoutHttpApiClientModule),
typeof(TFAbpBlazorLayoutBlazoriseThemeModule),//To be added for TF Blazorise Theme
typeof(AbpIdentityBlazorModule),
typeof(AbpTenantManagementBlazorModule)
)]