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

UI

LeptonX Blazor UI

LeptonX theme is implemented and ready to use with ABP Commercial. No custom implementation is needed for Blazor Server & WebAssembly.

Installation

  • Add Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme package to your Blazor WASM application.

    dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme --prerelease
    
  • Remove old theme from DependsOn attribute in your module class and add AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule type to DependsOn attribute.

[DependsOn(
-    typeof(LeptonThemeManagementBlazorModule),
-    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonThemeModule),
+    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule)
)]
  • Change startup App component with the LeptonX one.
    • Add following using declaration and remove your old theme using declaration.

      using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components;
      
    • Make sure App component in following block is Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.App

          // Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components' namespace.
          builder.RootComponents.Add<App>("#ApplicationContainer");
      
      • If you can't remove or not sure which one is the old theme's using statements, you can use full name of that class:
        builder.RootComponents.Add<Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.App>("#ApplicationContainer");
        

Customization

Themes

You can set default theme or add or remove themes via using LeptonXThemeOptions.

  • DefaultStyle: Defines deffault fallback theme. Default value is Dim

    Configure<LeptonXThemeOptions>(options =>
    {
        options.DefaultStyle = LeptonXStyleNames.Dark;
    });
    
  • Styles: Defines selectable themes from UI.

    lepton-x-selectable-themes

    Configure<LeptonXThemeOptions>(options =>
    {
        // Removing existing themes
        options.Styles.Remove(LeptonXStyleNames.Light);
    
        // Adding a new theme
        options.Styles.Add("red", 
            new LeptonXThemeStyle(
            LocalizableString.Create<YourResource>("Theme:Red"),
            "bi bi-circle-fill"));
    });
    
    

    red.css and bootstrap-red.css have to be added under wwwroot/side-menu/css/ folder for switching to your custom theme properly when selected.

LeptonXThemeBlazorOptions

Layout options of Blazor UI can be manageable via using LeptonXThemeMvcOptions.

  • Layout: Layout of main application. Default value is LeptonXMvcLayouts.SideMenu

    Configure<LeptonXThemeBlazorOptions>(options =>
    {
        options.Layout = LeptonXBlazorLayouts.SideMenu;
        // Or your custom implemented layout:
        options.Layout = typeof(MyCustomLayoutComponent);
    });
    
  • MobileMenuSelector: Defines items to be displayed at mobile menu. Default value is first 2 items from main menu items.

    leptonx-mobile-menu-preview

    Configure<LeptonXThemeBlazorOptions>(options =>
    {
        options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "Home" || x.MenuItem.Name == "Dashboard");
    });
    
In this document
Mastering ABP Framework
Mastering ABP Framework Book

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

See Details