Starts in:
1 DAY
14 HRS
47 MIN
50 SEC
Starts in:
1 D
14 H
47 M
50 S
Open Closed

[Angular] Menu Placement in leptonX comercial #3546


User avatar
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)
  • User Avatar
    0
    muhammedaltug created

    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 {}
    
    
  • User Avatar
    0
    FPT_TuyenDN1 created

    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?

  • User Avatar
    0
    muhammedaltug created

    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 {}
    
    
Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06