LeptonX Lite Angular UI

LeptonX Lite has implementation for the ABP Framework Angular Client. 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

To add LeptonX-lite into your project,

  • Install @abp/ng.theme.lepton-x

yarn add @abp/[email protected]

  • Install bootstrap-icons

yarn add bootstrap-icons

  • Then, we need to edit the styles array in angular.json to replace the existing style with the new one.

Add the following style

"node_modules/bootstrap-icons/font/bootstrap-icons.css",
  • Finally, remove ThemeBasicModule from app.module.ts, and import the related modules in app.module.ts
import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';

@NgModule({
  imports: [
    // ...

    // do not forget to remove ThemeBasicModule
    //  ThemeBasicModule.forRoot(),
    ThemeLeptonXModule.forRoot(),
    SideMenuLayoutModule.forRoot(),
  ],
  // ...
})
export class AppModule {}

Note: If you employ Resource Owner Password Flow for authorization, you should import the following module as well:

import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';

@NgModule({
  // ...
  imports: [
    // ...
    AccountLayoutModule.forRoot(),
    // ...
  ],
  // ...
})
export class AppModule {}

To change the logos and brand color of LeptonX, simply add the following CSS to the styles.scss

:root {
  --lpx-logo: url('/assets/images/logo.png');
  --lpx-logo-icon: url('/assets/images/logo-icon.png');
  --lpx-brand: #edae53;
}
  • --lpx-logo is used to place the logo in the menu.
  • --lpx-logo-icon is a square icon used when the menu is collapsed.
  • --lpx-brand is a color used throughout the application, especially on active elements.

Server Side

In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow the Server Side Migration document.

In this document
Mastering ABP Framework
Mastering ABP Framework Book

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

See Details