This document has multiple versions. Select the options best fit for you.

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

  • 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 IdentityServer.

  • 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
Mastering ABP Framework Book

Build maintainable .NET solutions by following software development best practices using ABP.

See Details