Filter by title
There is a newer version of this document!

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/ng.theme.lepton-x@preview

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

Contributors


Last updated: July 27, 2022 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

ABP Community Talks
Beyond WordPress: A Developer-Friendly CMS for .NET
28 Aug, 17:00
Online
Watch the Event
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book