LeptonX Angular UI
To add LeptonX
into your existing projects, follow the steps below.
- Firstly, install
@volosoft/abp.ng.theme.lepton-x
using the command below.yarn add @volosoft/abp.ng.theme.lepton-x
- Then, edit
angular.json
as follows:
Add theme-specific styles into the styles
array of the file. Check the Theme Configurations documentation for more information.
Importing a CSS file as an ECMA module is not supported in Angular 14. Therefore, we need to add the styles in the angular.json file.
- At last, remove
ThemeLeptonModule
fromapp.module.ts
andshared.module.ts
, and import the following modules inapp.module.ts
If you want to use the Top Menu
instead of the Side Menu
, add TopMenuLayoutModule as below,and this style imports
- At this point,
LeptonX
theme should be up and running within your application. However, you may need to overwrite some css variables based your needs for every theme available as follows:
If everything is ok, you can remove the @volo/abp.ng.theme.lepton
in package.json
Server Side
In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow Server Side Migration document.