Horizontal

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

ngOnInit(): void {
    document.documentElement.setAttribute('data-layout', 'horizontal');
    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', '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');
  }

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

Preloader Option

data-preloader="disable"

data-preloader="enable"