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

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19