Detached

Not applicable in horizontal layout

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', 'dark');
    document.documentElement.setAttribute('data-sidebar-size', 'lg');
    document.documentElement.setAttribute('data-layout-style', 'detached');
    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');
  }

Layout Style

data-layout-style, detached