0
FPT_TuyenDN1 created
hello, I want to set default theme in leptonX to light and change my menu placementto top in lepthon x. How I do that?
ABP Framework version: v5.3.3
UI type: Angular
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): yes
3 Answer(s)
-
0
Hello,
The top menu layout will available in the next versions.
You can change the default theme with the following code:
//app.module.ts import { NgModule } from '@angular/core'; import { lightTheme, LPX_THEME_STYLES_DEFAULTS, LPX_THEMES } from '@volosoft/ngx-lepton-x'; function setLpxThemes() { const themes = LPX_THEME_STYLES_DEFAULTS.map(style => Object.assign({}, style, { defaultTheme: style.styleName === lightTheme.styleName, }) ); return themes; } @NgModule({ imports: [ /* imports */], declarations: [/*declarations*/], providers: [ // ...other providers { provide: LPX_THEMES, useFactory: setLpxThemes }, ], bootstrap: [/*bootstrap comp*/], }) export class AppModule {}
-
0
Hello,
The top menu layout will available in the next versions.
You can change the default theme with the following code:
//app.module.ts import { NgModule } from '@angular/core'; import { lightTheme, LPX_THEME_STYLES_DEFAULTS, LPX_THEMES } from '@volosoft/ngx-lepton-x'; function setLpxThemes() { const themes = LPX_THEME_STYLES_DEFAULTS.map(style => Object.assign({}, style, { defaultTheme: style.styleName === lightTheme.styleName, }) ); return themes; } @NgModule({ imports: [ /* imports */], declarations: [/*declarations*/], providers: [ // ...other providers { provide: LPX_THEMES, useFactory: setLpxThemes }, ], bootstrap: [/*bootstrap comp*/], }) export class AppModule {}
thank you, it's worked. I also want to set default auto collapse menu like this How I do that?
-
0
Hello,
Can you add the following provider to your AppModule?
//app.module.ts import { APP_INITIALIZER, Injector, NgModule } from '@angular/core'; import { LayoutService } from '@volo/ngx-lepton-x.core'; function setCollapsedSidemenu(injector: Injector) { return () => { const layoutService = injector.get(LayoutService); layoutService.addClass('hover-trigger'); }; } @NgModule({ imports: [ /* imports */], declarations: [/*declarations*/], providers: [ // ...other providers { provide: APP_INITIALIZER, multi: true, useFactory: setCollapsedSidemenu, deps: [Injector], }, ], bootstrap: [/*bootstrap comp*/], }) export class AppModule {}