Open Closed

Creating new layout and use lepton x components in it ? #4358


User avatar
0
Thiqah.Abp.Dev4 created
  • ABP Framework version: v6.2
  • UI type: Angular - Theme Lepton X

I created a custom layout and i want to use components like the navbar, and breadcrumb components from the lepton x theme


5 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular#customization

  • User Avatar
    0
    Thiqah.Abp.Dev4 created

    Dear maliming, my issue "how can I use components from the theme in my custom layout " i want to use components like the navbar, and breadcrumb components from the lepton x theme

  • User Avatar
    0
    mahmut.gundogdu created

    Now I'm working on a document about this subject. It will be finished by the end of today. I will send the link

  • User Avatar
    0
    mahmut.gundogdu created

    This is just a draft of the doc. The documentation is waiting for review, but I have already tested. It works.

    Custom layout usage with Lepton X components

    First, The custom layout component should be created and implemented in the Angular application. Related content can be found at Component Replacement document

    After creating a custom layout, this imports should be imported on app.module.ts because the modules contains definitions of Lepton X components.

    // app.module.ts
    import { LpxSideMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts';
    import { LpxResponsiveModule } from '@volo/ngx-lepton-x.core';// optional. Only, if you are using lpxResponsive directive
    
     @NgModule({
     //... removed for clearity
      imports: [
      	//... removed for clearity
      	LpxSideMenuLayoutModule,
      	LpxResponsiveModule // <-- Optional
      	]
    })
    export class AppModule {}
    
    

    Here is the simplified version of side-menu-layout.ts. Only ABP replaceable system components have been removed.

    <ng-container *lpxResponsive="'all md-none'">
        <ng-container *ngTemplateOutlet="content"></ng-container>
      </ng-container>
      <ng-container *lpxResponsive="'md'">
        <div class="lpx-scroll-container ps" [perfectScrollbar]>
          <ng-container *ngTemplateOutlet="content"></ng-container>
        </div>
      </ng-container>
      <ng-template #content>
        <div
          id="lpx-wrapper">
          <div class="lpx-sidebar-container" *lpxResponsive="'md'">
            <div class="lpx-sidebar ps" [perfectScrollbar]>
                <lpx-navbar></lpx-navbar>
              <div class="lpx-logo-container">
                <lpx-brand-logo></lpx-brand-logo>
              </div>
            </div>
          </div>
      
          <div class="lpx-content-container">
            <div class="lpx-topbar-container">
              <div class="lpx-topbar">
                <div class="lpx-breadcrumb-container">
                    <lpx-breadcrumb></lpx-breadcrumb>
                </div>
                <div class="lpx-topbar-content">
                  <lpx-topbar-content></lpx-topbar-content>
                </div>
              </div>
            </div>
            <div class="lpx-content-wrapper">
              <div class="lpx-content">
                <router-outlet></router-outlet>
                      </div>
            </div>
            <div class="lpx-footbar-container">
                <lpx-footer></lpx-footer>
            </div>
          </div>
      
          <lpx-mobile-navbar *lpxResponsive="'all md-none'"></lpx-mobile-navbar>
    
          <div class="lpx-toolbar-container" *lpxResponsive="'md'">
            <lpx-toolbar-container></lpx-toolbar-container>
            <lpx-avatar></lpx-avatar>
            <lpx-settings></lpx-settings>
          </div>
        </div>
      </ng-template>
    
    

    Add this code to your application template and customize it as desired.

  • User Avatar
    0
    Thiqah.Abp.Dev4 created

    Thanks bro every thing is working correctly

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.3.0-preview. Updated on April 16, 2025, 12:13