# TF.Abp.Blazor.Layout

**Repository Path**: pauljoihn21/TF.Abp.Blazor.Layout

## Basic Information

- **Project Name**: TF.Abp.Blazor.Layout
- **Description**: Free Blazor wams layouts which integrated with Abp VNext
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-03
- **Last Updated**: 2022-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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
![Ant-design-Demo.png](https://raw.githubusercontent.com/TFInfoTech/TF.Abp.Blazor.Layout/main/Files/Images/Ant-design-Demo.png "Ant-design-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 &lt;ProjectName&gt;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
    }
    ```
4.  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 &lt;ProjectName&gt;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.