TF.Abp.Blazor.Layout
TF.Abp.Blazor.Layout copied to clipboard
Free Blazor wams layouts which integrated with Abp VNext
TF.Abp.Blazor.Layout
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.
Project
You can find the project code on github. It's free and open source. https://github.com/TFInfoTech/TF.Abp.Blazor.Layout
Code structure
Solution is generated by Abp CLI.
- Demos
- Projects to show the layouts.
- Themes
- Projects of themes integrated with Abp VNext.
- Others
- Abp code generated by Abp CLI. You can refer to the Abp VNext document.
- https://docs.abp.io/en/abp/latest
Themes
Ant Design Theme
Demo
Nuget Package
- You can reference the Theme by install the package to your Blazor wasm project.
- Package name => TF.Abp.Blazor.Layout.AntDesignTheme
- Remove the Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme package which is installed by code generation.
Source code project
- You also can reference the project code if you want to customize the layout.
- Remove the Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme package which is installed by code generation.
- Source code: https://github.com/TFInfoTech/TF.Abp.Blazor.Layout/tree/main/aspnet-core/src/Layouts/TF.Abp.Blazor.AntDesignTheme
Add code to initialize your layout
-
Update _Imports.razor. Add using statement.
@using TF.Abp.Blazor.Layout.AntDesignTheme
-
Update <ProjectName>Module.cs
- Add dependency
[DependsOn( typeof(AbpAutofacWebAssemblyModule), typeof(LayoutHttpApiClientModule), typeof(TFAbpBlazorAntDesignThemeModule),//To be added for TF AntDesign Theme typeof(AbpIdentityBlazorModule), typeof(AbpTenantManagementBlazorModule) )]
- Add Configure
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); }
- New Configure Method
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")); }
- Add dependency
-
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
- Add css reference to header
<!--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-->
- Add scripts reference to Body
<!--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-->
Blazorise Theme
Nuget Package
You can reference the Theme by install the package to your Blazor wasm project.
- Package name TF.Abp.Blazor.Layout.BlazoriseTheme
Source code project
You also can reference the project code if you want to customize the layout.
https://github.com/TFInfoTech/TF.Abp.Blazor.Layout/tree/main/aspnet-core/src/Layouts/TF.Abp.Blazor.BlazoriseTheme
Add code to initialize your layout
Abp reference the Blazorize by defult. So You just need to reference the layout and add necessary dependency.
- Update _Imports.razor. Add using statement.
@using TF.Abp.Blazor.Layout.BlazoriseTheme
- Update <ProjectName>Module.cs
- Add dependency
[DependsOn( typeof(AbpAutofacWebAssemblyModule), typeof(LayoutHttpApiClientModule), typeof(TFAbpBlazorLayoutBlazoriseThemeModule),//To be added for TF Blazorise Theme typeof(AbpIdentityBlazorModule), typeof(AbpTenantManagementBlazorModule) )]
- OK, it's done.
- Add dependency