diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md index 067052e322..6cb0f0c66b 100644 --- a/docs/en/UI/Blazor/Theming.md +++ b/docs/en/UI/Blazor/Theming.md @@ -1,5 +1,12 @@ # Blazor UI: Theming +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + ## Introduction ABP Framework provides a complete **UI Theming** system with the following goals: @@ -25,8 +32,18 @@ Currently, two themes are **officially provided**: ### The Base Libraries +{{if UI == "Blazor"}} + All the themes must depend on the [Volo.Abp.AspNetCore.Components.WebAssembly.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.Theming) NuGet package, so they are indirectly depending on the following libraries: +{{end}} + +{{if UI == "BlazorServer"}} + +All the themes must depend on the [Volo.Abp.AspNetCore.Components.Server.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.Theming) NuGet package, so they are indirectly depending on the following libraries: + +{{end}} + * [Twitter Bootstrap](https://getbootstrap.com/) as the fundamental HTML/CSS framework. * [Blazorise](https://github.com/stsrki/Blazorise) as a component library that supports the Bootstrap and adds extra components like Data Grid and Tree. * [FontAwesome](https://fontawesome.com/) as the fundamental CSS font library. @@ -61,9 +78,17 @@ The application layout typically includes the following parts; A theme is simply a Razor Class Library. -### The Easy Way +### The Easiest Way + +The easiest way to create a new theme is copying the [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) and customizing it. -The easiest way to create a new theme is to copy the [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) and customize it. Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project. +{{if UI == "Blazor"}} +Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project. +{{end}} + +{{if UI == "BlazorServer"}} +Once you get a copy of the theme in your solution, remove `Volo.Abp.AspNetCore.Components.Server.BasicTheme` and `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` NuGet packages and add references to local projects. +{{end}} ### Global Styles / Scripts @@ -165,6 +190,9 @@ Configure(options => Language Selection toolbar item is generally a dropdown that is used to switch between languages. `ILanguageProvider` is used to get the list of available languages and `CultureInfo.CurrentUICulture` is used to learn the current language. + +{{if UI == "Blazor"}} + Local Storage is used to get and set the current language with the `Abp.SelectedLanguage` key. **Example: Get the currently selected language** @@ -192,6 +220,31 @@ The theme should reload the page after changing the language: await JsRuntime.InvokeVoidAsync("location.reload"); ```` +{{end}} + +{{if UI == "BlazorServer"}} +Localization works on Server side in Blazor Server. So, regular AspNetCore localization middleware is used. + +**Example: Get the currently selected language** + +````csharp +var selectedLanguageName = CultureInfo.CurrentCulture.Name; +```` + +**Example: Set the selected language** + +````csharp +// Get current url. +var relativeUrl = NavigationManager.Uri.RemovePreFix(NavigationManager.BaseUri).EnsureStartsWith('/'); + +// Redirect to ABP language switch endpoint. +NavigationManager.NavigateTo( + $"/Abp/Languages/Switch?culture={newLanguage.CultureName}&uiCulture={newLanguage.UiCultureName}&returnUrl={relativeUrl}", + forceLoad: true +); +```` +{{end}} + ##### User Menu User menu includes links related to the user account. `IMenuManager` is used just like the Main Menu, but this time with `StandardMenus.User` parameter like shown below: