LeptonX Blazor UI

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

Installation

• Complete MVC Installation steps first.

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

  dotnet add package Volo.Abp.AspNetCore.Components.Server.LeptonXTheme --prerelease
  

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

[DependsOn(
-    typeof(LeptonThemeManagementBlazorModule),
-    typeof(AbpAspNetCoreComponentsServerLeptonThemeModule),
+    typeof(AbpAspNetCoreComponentsServerLeptonXThemeModule)
)]

• Update AbpBundlingOptions

  options.StyleBundles.Configure(
  - BlazorLeptonThemeBundles.Styles.Global,
  + BlazorLeptonXThemeBundles.Styles.Global,
    bundle =>
    {
        bundle.AddFiles("/blazor-global-styles.css");
        //You can remove the following line if you don't use Blazor CSS isolation for components
        bundle.AddFiles("/MyProjectName.Blazor.styles.css");
    });
  

• Update _Host.cshtml file. (located under Pages folder by default.)

  • Add following usings to Locate App and BlazorLeptonXThemeBundles classes.

    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components
    @using Volo.Abp.AspNetCore.Components.Server.LeptonXTheme.Bundling
    

  • Then replace script & style bunles as following

    - <abp-style-bundle name="@BlazorBasicThemeBundles.Styles.Global" />
    + <abp-style-bundle name="@BlazorLeptonXThemeBundles.Styles.Global" />
    

    - <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" />
    + <abp-script-bundle name="@BlazorLeptonXThemeBundles.Scripts.Global" />
    

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.

  

  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.

  

  Configure<LeptonXThemeBlazorOptions>(options =>
  {
      options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "Home" || x.MenuItem.Name == "Dashboard");
  });