From 67b3d58ab9fe3ba622ffc0b91f7d580ad1c9d904 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 9 May 2022 11:39:55 +0300 Subject: [PATCH] Separate Blazor WASM & Server for Blazor\Basic-Theme.md --- docs/en/UI/Blazor/Basic-Theme.md | 75 +++++++++++++++++++++++++++++--- 1 file changed, 69 insertions(+), 6 deletions(-) diff --git a/docs/en/UI/Blazor/Basic-Theme.md b/docs/en/UI/Blazor/Basic-Theme.md index 2c034f258a..b4eb1c4f92 100644 --- a/docs/en/UI/Blazor/Basic-Theme.md +++ b/docs/en/UI/Blazor/Basic-Theme.md @@ -1,5 +1,12 @@ # Blazor UI: Basic Theme +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/). You can take the Basic Theme as the **base theme** and build your own theme or styling on top of it. See the *Customization* section. > If you are looking for a professional, enterprise ready theme, you can check the [Lepton Theme](https://commercial.abp.io/themes), which is a part of the [ABP Commercial](https://commercial.abp.io/). @@ -10,16 +17,48 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist **This theme is already installed** when you create a new solution using the [startup templates](../../Startup-Templates/Index.md). If you need to manually install it, follow the steps below: +{{if UI == "Blazor"}} + * Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your web project. * Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project. * Use `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic.App` as the root component of your application in the `ConfigureServices` method of your module: -````csharp -var builder = context.Services.GetSingletonInstance(); -builder.RootComponents.Add("#ApplicationContainer"); -```` + ```csharp + var builder = context.Services.GetSingletonInstance(); + builder.RootComponents.Add("#ApplicationContainer"); + ``` + `#ApplicationContainer` is a selector (like `
Loading...
`) in the `index.html`. + +* Execute `abp-bundle` command under blazor project once. + +{{end}} + + +{{if UI == "BlazorServer"}} + +* Make sure [AspNetCore Basic Theme](../AspNetCore/Basic-Theme.md) installation steps are completed. + +* Install the [Volo.Abp.AspNetCore.Components.Server.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.BasicTheme) NuGet package to your web project. + +* Add `AbpAspNetCoreComponentsServerBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project. + +* Perform following changes in `Pages/_Host.cshtml` file + * Add usings at the top of the page. + ```html + @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Bundling + @using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic + ``` + * Add Basic theme style bundled between `` tags. + ```html + + ``` + * Add `App` component of Basic Theme in the body section of page. + ```html + + ``` + +{{end}} -`#ApplicationContainer` is a selector (like `
Loading...
`) in the `index.html`. ## The Layout @@ -52,15 +91,39 @@ See the [Customization / Overriding Components](Customization-Overriding-Compone You can run the following [ABP CLI](../../CLI.md) command in **Blazor WebAssembly** project directory to copy the source code to your solution: + +{{if UI == "Blazor"}} + `abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file` Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` project directory and run: `abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file` +{{end}} + +{{if UI == "BlazorServer"}} + +`abp add-package Volo.Abp.AspNetCore.Components.Server.BasicTheme --with-source-code --add-to-solution-file` + +Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.Server.BasicTheme` project directory and run: + +`abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file` + +{{end}} + ---- -Or, you can download the [source code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements. + +Or, you can download the source code of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements. + +{{if UI == "Blazor"}} +- [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) +{{end}} + +{{if UI == "BlazorServer"}} +- [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Server.BasicTheme) +{{end}} ## See Also