Two Column

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform in src/app/layouts/layouts.model.ts folder.

Theme Options

Each of the theme configuration options is provided Below, you can change their values as per you need in ngOnInit variable located in src/app/layouts/vertical/vertical.component.ts file.

Note : if you are going to update any object property of ngOnInit, make sure you use option's corresponding constant given in src/app/layouts/layouts.model.ts file. (Please do not change the constant's value in src/app/layouts/two-column/two-column.component.ts file)

ngOnInit(): void {
    document.documentElement.setAttribute('data-layout', 'twocolumn');
    document.documentElement.setAttribute('data-topbar', 'light');
    document.documentElement.setAttribute('data-sidebar', 'light');
    document.documentElement.setAttribute('data-sidebar-size', 'lg');
    document.documentElement.setAttribute('data-layout-style', 'default');
    document.documentElement.setAttribute('data-bs-theme', 'light');
    document.documentElement.setAttribute('data-layout-width', 'fluid');
    document.documentElement.setAttribute('data-layout-position', 'fixed');
    document.documentElement.setAttribute('data-preloader', 'disable');
  }

Topbar Colors

data-topbar, light

data-topbar, dark

Sidebar Colors

data-sidebar, light

data-sidebar, dark

data-sidebar="gradient"

data-sidebar="gradient-2"

data-sidebar="gradient-3"

data-sidebar="gradient-4"

Sidebar Images

data-sidebar-image="none"

data-sidebar-image="img-1"

data-sidebar-image="img-2"

data-sidebar-image="img-3"

data-sidebar-image="img-4"

Preloader Option

data-preloader="disable"

data-preloader="enable"