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

1. Update _Imports.razor. Add using statement. @using TF.Abp.Blazor.Layout.AntDesignTheme

2. 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"));
     }
     

3. 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;
   }
   

4. 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
   }
   

5. 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.

1. Update _Imports.razor. Add using statement. @using TF.Abp.Blazor.Layout.BlazoriseTheme
2. 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.