Layout Classes
We provide a comprehensive set of classes for different layout types including vertical, horizontal, and blank layouts. These classes are designed to assist in customizing the layout of your application. You can find these classes in the src/@layouts/utils/layoutClasses.ts
file. You can also create and use your own custom classes for more specific layout needs.
List of classes
Vertical Layout Classes
Variable Name | Class Name |
---|---|
root | ts-vertical-layout |
contentWrapper | ts-vertical-layout-content-wrapper |
header | ts-vertical-layout-header |
headerFixed | ts-vertical-layout-header-fixed |
headerStatic | ts-vertical-layout-header-static |
headerFloating | ts-vertical-layout-header-floating |
headerDetached | ts-vertical-layout-header-detached |
headerAttached | ts-vertical-layout-header-attached |
headerContentCompact | ts-vertical-layout-header-content-compact |
headerContentWide | ts-vertical-layout-header-content-wide |
headerBlur | ts-vertical-layout-header-blur |
navbar | ts-vertical-layout-navbar |
navbarContent | ts-vertical-layout-navbar-content |
content | ts-vertical-layout-content |
contentCompact | ts-vertical-layout-content-compact |
contentWide | ts-vertical-layout-content-wide |
footer | ts-vertical-layout-footer |
footerStatic | ts-vertical-layout-footer-static |
footerFixed | ts-vertical-layout-footer-fixed |
footerDetached | ts-vertical-layout-footer-detached |
footerAttached | ts-vertical-layout-footer-attached |
footerContentWrapper | ts-vertical-layout-footer-content-wrapper |
footerContent | ts-vertical-layout-footer-content |
footerContentCompact | ts-vertical-layout-footer-content-compact |
footerContentWide | ts-vertical-layout-footer-content-wide |
Horizontal Layout Classes
Variable Name | Class Name |
---|---|
root | ts-horizontal-layout |
contentWrapper | ts-horizontal-layout-content-wrapper |
header | ts-horizontal-layout-header |
headerFixed | ts-horizontal-layout-header-fixed |
headerStatic | ts-horizontal-layout-header-static |
headerContentCompact | ts-horizontal-layout-header-content-compact |
headerContentWide | ts-horizontal-layout-header-content-wide |
headerBlur | ts-horizontal-layout-header-blur |
navbar | ts-horizontal-layout-navbar |
navbarContent | ts-horizontal-layout-navbar-content |
navigation | ts-horizontal-layout-navigation |
navigationContentWrapper | ts-horizontal-layout-navigation-content-wrapper |
content | ts-horizontal-layout-content |
contentCompact | ts-horizontal-layout-content-compact |
contentWide | ts-horizontal-layout-content-wide |
footer | ts-horizontal-layout-footer |
footerStatic | ts-horizontal-layout-footer-static |
footerFixed | ts-horizontal-layout-footer-fixed |
footerContentWrapper | ts-horizontal-layout-footer-content-wrapper |
footerContent | ts-horizontal-layout-footer-content |
footerContentCompact | ts-horizontal-layout-footer-content-compact |
footerContentWide | ts-horizontal-layout-footer-content-wide |
Blank Layout Classes
Variable Name | Class Name |
---|---|
root | ts-blank-layout |
How to create your custom classes?
To create your own custom layout classes, start by making a new file (say, src/utils/userLayoutClasses.ts
). You can use src/@layouts/utils/layoutClasses.ts
file as a reference. Here's a pattern you can follow in your custom file:
export const verticalLayoutClasses = {
customClass: 'custom-layout-class'
}
You may copy the code from the src/@layouts/utils/layoutClasses.ts
file and paste it in the newly created file. Then, you can add your custom classes to the objects.
How to use your custom classes?
You need to import the custom classes in the file where you want to use them in the following way:
import { verticalLayoutClasses } from 'src/utils/userLayoutClasses'
<SomeComponent className={verticalLayoutClasses.customClass}>
...
</SomeComponent>
That's it!