BLACK FRIDAY
From November 21
to December 02
99Days : 99Hrs : 99Min : 99Sec
SAVE UP TO$3K
Also valid for the
existing customers!
Version
Language

There are multiple versions of this document. Pick the options that suit you best.

UI

LeptonX Lite Blazor UI

LeptonX Lite has implementation for the ABP Framework Blazor WebAssembly & Blazor Server. It's a simplified variation of the LeptonX Theme.

If you are looking for a professional, enterprise ready theme, you can check the LeptonX Theme, which is a part of ABP Commercial.

See the Theming document to learn about themes.

Installation

This theme is already installed when you create a new solution using the startup templates. If you are using any other template, you can install this theme by following the steps below:

  • Complete the MVC Razor Pages Installation for the HttpApi.Host application first. If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as HttpApi.Host and if identity server is separated, install to the OpenIddict.

  • Add Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme package to your Blazor WebAssembly application with the following command:

    dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme --prerelease
    
  • Remove Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme reference from the project since it's not necessary after switching to LeptonX Lite.

  • Remove the old theme from the DependsOn attribute in your module class and add the AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule type to the DependsOn attribute.

[DependsOn(
     // Remove BasicTheme module from DependsOn attribute
-    typeof(AbpAspNetCoreComponentsWebAssemblyBasicThemeModule),

    // Add LeptonX Lite module to DependsOn attribute
+    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule),
)]
  • Change startup App component with the LeptonX one.
// Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite' namespace.
builder.RootComponents.Add<App>("#ApplicationContainer");
  • Run the abp bundle command in your Blazor application folder.

Customization

Toolbars

LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the LeptonXLiteToolbars class.

  • LeptonXLiteToolbars.Main
  • LeptonXLiteToolbars.MainMobile
public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
{
    if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
    {
        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
    }

    if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
    {
        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
    }

    return Task.CompletedTask;
}
In this document
Mastering ABP Framework Book
Mastering ABP Framework