Drift Angular
Search…
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
Layouts
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:
1
loadChildren: './layouts/default-layout/default-layout.module#DefaultLayoutModule'
Copied!

SAAS Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/saas-layout/saas-layout.module#SaasLayoutModule'
Copied!

Listing Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/listing-layout/listing-layout.module#ListingLayoutModule'
Copied!

Intranet Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/intranet-layout/intranet-layout.module#IntranetLayoutModule'
Copied!

Back Office Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/back-office-layout/back-office-layout.module#BackOfficeLayoutModule'
Copied!

Back Office Minimal Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/back-office-mini-layout/back-office-mini-layout.module#BackOfficeMiniLayoutModule'
Copied!

Modern Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/modern-layout/modern-layout.module#ModernLayoutModule'
Copied!

CRM Layout

To use this layout add following route in src/app/app-routing.module.ts file:
1
loadChildren: './layouts/default-layout/crm-layout.module#CrmLayoutModule'
Copied!

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:
1
loadChildren: './layouts/auth-layout/auth.module#AuthModule'
Copied!
and add AuthGuard to other reoutes to stop access without sign-in.
1
canActivate: [AuthGuard]
Copied!

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:
1
loadChildren: './layouts/frontend-layout/frontend-layout.module#FrontendLayoutModule'
Copied!
Structure - Previous
Folders and Files Structure
Next - Structure
Drift Icons
Last modified 1yr ago
Copy link
Contents
Default Layout
SAAS Layout
Listing Layout
Intranet Layout
Back Office Layout
Back Office Minimal Layout
Modern Layout
CRM Layout
Common Layouts