Hovered
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', 'sm-hover');
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');
}
Sidebar Style Colors
data-sidebar-size, sm-hover