LeptonX MVC UI

LeptonX theme is implemented and ready to use with ABP Commercial. No custom implementation is needed for Razor Pages.

Installation

• Install the package to your Web project with the CLI.

abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX

• Remove the Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton and the Volo.Abp.LeptonTheme.Management.Web references from the project since it's not necessary after switching to LeptonX.

• Make sure the old theme is removed and LeptonX is added in your Module class.

[DependsOn(
        // ...
        // remove the following lines
-       typeof(LeptonThemeManagementWebModule),
-       typeof(AbpAspNetCoreMvcUiLeptonThemeModule),

        // add the line below
+       typeof(AbpAspNetCoreMvcUiLeptonXThemeModule),
)]

• Replace LeptonThemeBundles with LeptonXThemeBundles in AbpBundlingOptions.

    options.StyleBundles.Configure(
            LeptonXThemeBundles.Styles.Global, // 👈 Here
            bundle =>
            {
                bundle.AddFiles("/global-styles.css");
            }
        );

Customization

Themes

You can set a default theme, add or remove themes by using LeptonXThemeOptions.

• DefaultStyle: Defines the default fallback theme. The default value is Dim

Configure<LeptonXThemeOptions>(options =>
{
    options.DefaultStyle = LeptonXStyleNames.Dark;
});

• Styles: Defines selectable themes from UI.

Configure<LeptonXThemeOptions>(options =>
{
    // Removing the 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/Themes/LeptonX/Global/side-menu/css/ folder for switching to your custom theme properly when selected.

LeptonXThemeMvcOptions

Layout options of the MVC Razor Pages UI can be manageable by using LeptonXThemeMvcOptions.

• ApplicationLayout: Layout of the main application. The default value is LeptonXMvcLayouts.SideMenu

  Configure<LeptonXThemeMvcOptions>(options =>
  {
      options.ApplicationLayout = LeptonXMvcLayouts.SideMenu;
      // Or your custom implemented layout:
      options.ApplicationLayout = "~/Shared/_Layout.cshtml";
  });
  

• MobileMenuSelector: Defines items to be displayed at the mobile menu. The default value is the first 2 items from the main menu items.

  

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

Layouts

LeptonX offers two ready-made layouts for your web application. One of them is placed with the menu items on the top and the other with the menu items on the sides.

Top Menu Layout

Side Menu Layout

The layouts are defined in the Themes/LeptonX/Layouts/Application folder and you can override it by creating the file (SideMenuLayout.cshtml or TopMenuLayout.cshtml) with the same name and under the same folder.

There are partial views that are defined in the Themes/LeptonX/Layouts/Application folder. You can override them by creating the file with the same name and under the same folder.

• _Footer.cshtml
• _Sidebar.cshtml
• _Toolbar.cshtml

Account Layout

The account layout is defined in the Themes/LeptonX/Layouts/Account folder and you can override it by creating the file (Default.cshtml) with the same name and under the same folder. There is a partial view, its name is Footer.cshtml. You can override it by following the same way.

Components

Abp helps you make highly customizable UI. You can easily customize your themes to fit your needs. The Virtual File System makes it possible to manage files that do not physically exist on the file system (disk). It's mainly used to embed (js, css, image..) files into assemblies and use them like physical files at runtime.

An application (or another module) can override a virtual file of a module just like placing a file with the same name and extension into the same folder of the virtual file.

LeptonX is built on the Abp Framework, so you can easily customize your Asp.Net Core Mvc user interface by following Abp Mvc UI Customization.

Common Components

Commonly used components in all layouts.

Breadcrumb

• The breadcrumb component page (.cshtml file) is defined in the Themes/LeptonX/Components/Common/BreadCrumb/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The breadcrumb component (C# file) is defined in the Themes/LeptonX/Components/Common/BreadCrumb/ContentBreadCrumbViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Content Title

• The content title component page (.cshtml file) is defined in the Themes/LeptonX/Components/Common/ContentTitle/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The content title component (C# file) is defined in the Themes/LeptonX/Components/Common/ContentTitle/ContentTitleViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

General Settings

• The general settings component page (.cshtml file) is defined in the Themes/LeptonX/Components/Common/GeneralSettings/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The general settings component (C# file) is defined in the Themes/LeptonX/Components/Common/GeneralSettings/GeneralSettingsViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Main Header Branding

• The main header branding component page (.cshtml file) is defined in the Themes/LeptonX/Components/Common/MainHeaderBranding/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The main header branding component (C# file) is defined in the Themes/LeptonX/Components/Common/MainHeaderBranding/MainHeaderBrandingViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Mobile General Settings

• The mobile general settings component page (.cshtml file) is defined in the Themes/LeptonX/Components/Common/MobileGeneralSettings/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The mobile general settings component (C# file) is defined in the Themes/LeptonX/Components/Common/MobileGeneralSettings/MobileGeneralSettingsViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Page Alerts

• The page alerts component page (.cshtml file) is defined in the Themes/LeptonX/Components/PageAlerts/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The page alerts component (C# file) is defined in the Themes/LeptonX/Components/PageAlerts/PageAlertsViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Side Menu Components

Components used in the side menu layout.

Main Menu

• The main menu component page (.cshtml file) is defined in the Themes/LeptonX/Components/SideMenu/MainMenu/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The main menu component (C# file) is defined in the Themes/LeptonX/Components/SideMenu/MainMenu/MainMenuViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

The main menu component uses partial view to render the menu items. The partial view is defined in the Themes/LeptonX/Components/SideMenu/MainMenu/_MenuItem.cshtml file and you can override it by creating a file with the same name and under the same folder.

Mobile Navbar

• The mobile navbar component page (.cshtml file) is defined in the Themes/LeptonX/Components/SideMenu/MobileNavbar/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The mobile navbar component (C# file) is defined in the Themes/LeptonX/Components/SideMenu/MobileNavbar/MobileNavbarViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Language Switch

• The language switch component page (.cshtml file) is defined in the Themes/LeptonX/Components/SideMenu/Toolbar/LanguageSwitch/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The language switch component (C# file) is defined in the Themes/LeptonX/Components/SideMenu/Toolbar/LanguageSwitch/LanguageSwitchViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

User Menu

• The user menu component page (.cshtml file) is defined in the Themes/LeptonX/Components/SideMenu/Toolbar/UserMenu/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The user menu component (C# file) is defined in the Themes/LeptonX/Components/SideMenu/Toolbar/UserMenu/UserMenuViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Top Menu Components

Components used in the top menu layout.

Main Header

• The main header component page (.cshtml file) is defined in the Themes/LeptonX/Components/TopMenu/MainHeader/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The main header component (C# file) is defined in the Themes/LeptonX/Components/TopMenu/MainHeader/MainHeaderViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Main Header Toolbar

• The main header toolbar component page (.cshtml file) is defined in the Themes/LeptonX/Components/TopMenu/MainHeaderToolbar/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The main header toolbar component (C# file) is defined in the Themes/LeptonX/Components/TopMenu/MainHeaderToolbar/MainHeaderToolbarViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

Main Menu

• The main menu component page (.cshtml file) is defined in the Themes/LeptonX/Components/TopMenu/MainMenu/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The main menu component (C# file) is defined in the Themes/LeptonX/Components/TopMenu/MainMenu/MainMenuViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.

User Menu

• The user menu component page (.cshtml file) is defined in the Themes/LeptonX/Components/TopMenu/UserMenu/Default.cshtml file and you can override it by creating a file with the same name and under the same folder.

• The user menu component (C# file) is defined in the Themes/LeptonX/Components/TopMenu/UserMenu/UserMenuViewComponent.cs file and you can override it by creating a file with the same name and under the same folder.