Add Blazor Server seperation to the Customization-Overriding-Components.md

docs/en/UI/Blazor/Customization-Overriding-Components.md

@@ -1,5 +1,12 @@
 # Blazor UI: Customization / Overriding Components
 
+````json
+//[doc-params]
+{
+    "UI": ["Blazor", "BlazorServer"]
+}
+````
+
 This document explains how to override the user interface of a depended [application module](../../Modules/Index.md) or [theme](Theming.md) for Blazor applications.
 
 ## Overriding a Razor Component
@@ -26,6 +33,30 @@ The next step is to create a razor component, like `MyBranding.razor`, in your a
 
 The content of the `MyBranding.razor` is shown below:
 
+{{if UI == "BlazorServer"}}
+
+````html
+@using Volo.Abp.DependencyInjection
+@using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic
+@inherits Branding
+@attribute [ExposeServices(typeof(Branding))]
+@attribute [Dependency(ReplaceServices = true)]
+<a href="/">
+    <img src="bookstore-logo.png" width="250" height="60"/>
+</a>
+````
+
+Let's explain the code:
+
+* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic` namespace).
+* `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component).
+* `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component).
+* The rest of the code is related the content and styling of the component.
+
+{{end}}
+
+{{if UI == "Blazor"}}
+
 ````html
 @using Volo.Abp.DependencyInjection
 @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
@@ -44,6 +75,8 @@ Let's explain the code:
 * `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component).
 * The rest of the code is related the content and styling of the component.
 
+{{end}}
+
 Now, you can run the application to see the result:
 
 ![bookstore-added-logo](../../images/bookstore-added-logo.png)
@@ -56,6 +89,17 @@ If you prefer to use code-behind file for the C# code of your component, you can
 
 **MyBlazor.razor**
 
+{{if UI == "BlazorServer"}}
+````html
+@using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic
+@inherits Branding
+<a href="/">
+    <img src="bookstore-logo.png" width="250" height="60"/>
+</a>
+````
+{{end}}
+
+{{if UI == "Blazor"}}
 ````html
 @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
 @inherits Branding
@@ -63,8 +107,27 @@ If you prefer to use code-behind file for the C# code of your component, you can
     <img src="bookstore-logo.png" width="250" height="60"/>
 </a>
 ````
+{{end}}
 
 **MyBlazor.razor.cs**
+{{if UI == "BlazorServer"}}
+
+````csharp
+using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic;
+using Volo.Abp.DependencyInjection;
+
+namespace MyProject.Blazor.Components
+{
+    [ExposeServices(typeof(Branding))]
+    [Dependency(ReplaceServices = true)]
+    public partial class MyBranding
+    {
+
+    }
+}
+````
+{{end}}
+{{if UI == "Blazor"}}
 
 ````csharp
 using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic;
@@ -80,6 +143,7 @@ namespace MyProject.Blazor.Components
     }
 }
 ````
+{{end}}
 
 ## Theming