Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Default Layout
  • SAAS Layout
  • Listing Layout
  • Intranet Layout
  • Back Office Layout
  • Back Office Minimal Layout
  • Modern Layout
  • CRM Layout
  • Common Layouts

Was this helpful?

  1. Structure

Layouts

PreviousFolders and Files StructureNextDrift Icons

Last updated 5 years ago

Was this helpful?

Drift Angular has lots of layout that fullfill your requirements to develop a Amaizing App.

There are following layouts which Drift Angular provides:

Default Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule'

SAAS Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/saas-layout/saas-layout.module#SaasLayoutModule'

Listing Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/listing-layout/listing-layout.module#ListingLayoutModule'

Intranet Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/intranet-layout/intranet-layout.module#IntranetLayoutModule'

Back Office Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/back-office-layout/back-office-layout.module#BackOfficeLayoutModule'

Back Office Minimal Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/back-office-mini-layout/back-office-mini-layout.module#BackOfficeMiniLayoutModule'

Modern Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/modern-layout/modern-layout.module#ModernLayoutModule'

CRM Layout

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/default-layout/crm-layout.module#CrmLayoutModule'

Common Layouts

There are two common layouts for authentication and frontend pages.

Auth Layout

Auth layout will use to authenticate user. Here user can signup and sign-in.

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/auth-layout/auth.module#AuthModule'

and add AuthGuard to other reoutes to stop access without sign-in.

canActivate: [AuthGuard]

Frontend Layout

Frontend layout will use to for frontent pages in Drift Angular.

To use this layout add following route in src/app/app-routing.module.ts file:

loadChildren: './layouts/frontend-layout/frontend-layout.module#FrontendLayoutModule'