Ends in:
3 DAYS
2 HRS
47 MIN
59 SEC
Ends in:
3 D
2 H
47 M
59 S

Blazor UI: Customization / Overriding Components

This document explains how to override the user interface of a depended application module or theme for Blazor applications.

Overriding a Razor Component

The ABP Framework, pre-built themes and modules define some re-usable razor components and pages. These pages and components can be replaced by your application or module.

Since pages are just the razor components, the same principle is valid for pages too.

Example: Replacing the Branding Area

The screenshot below was taken from the Basic Theme comes with the application startup template.

bookstore-brand-area-highlighted

The Basic Theme defines some razor components for the layout. For example, the highlighted area with the red rectangle above is called Branding component. You probably want to customize this component by adding your own application logo. Let's see how to do it.

First, create your logo and place under a folder in your web application. We used wwwroot/bookstore-logo.png path:

bookstore-logo-blazor

The next step is to create a razor component, like MyBlazor.razor, in your application:

bookstore-logo-blazor

The content of the MyBlazor.razor is shown below:

@using Volo.Abp.DependencyInjection
@using Volo.Abp.AspNetCore.Components.WebAssembly.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 (in the Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic namespace).
  • @attribute [ExposeServices(typeof(Branding))] registers this service (component) to dependency injection 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.

Now, you can run the application to see the result:

bookstore-added-logo

Since the component inherits from the component it is replacing, you can use all the non-private fields/properties/methods of the base component in the derived component.

Example: Replacing with the Code Behind File

If you prefer to use code-behind file for the C# code of your component, you can use the attributes in the C# side.

MyBlazor.razor

@using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic
@inherits Branding
<a href="/">
    <img src="bookstore-logo.png" width="250" height="60"/>
</a>

MyBlazor.razor.cs

using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic;
using Volo.Abp.DependencyInjection;

namespace MyProject.Blazor.Components
{
    [ExposeServices(typeof(Branding))]
    [Dependency(ReplaceServices = true)]
    public partial class MyBranding
    {

    }
}

Theming

The Theming system allows you to build your own theme. You can create your theme from scratch or get the Basic Theme and change however you like.

Contributors


Last updated: November 19, 2020 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More