Vertical

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/vertical/vertical.component.ts file)

ngOnInit(): void {
    document.documentElement.setAttribute('data-layout', 'vertical');
    document.documentElement.setAttribute('data-topbar', 'light');
    document.documentElement.setAttribute('data-sidebar', 'light');
    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-sidebar-image', 'none');
    document.documentElement.setAttribute('data-preloader', 'disable');
  }

Layout Width

data-layout-width, fluid

data-layout-style, boxed

Layout Position

data-layout-position, fixed

data-layout-position, scrollable

Topbar Colors

data-topbar, light

data-topbar, dark

data-topbar,brand

Sidebar Sizes

data-sidebar-size, lg

data-sidebar-size, md

data-sidebar-size, sm

data-sidebar-size, sm-hover

Sidebar View

data-layout-style, default

data-layout-style, detached

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"