Template Settings

This topic covers the detail about the default setting options for the template. 
To customize and update default settings you need to go to: 
 src / @jumbo / components / contextProvider / AppContextProvider / 
And then open defaultContext.js file.
In this file, you can see all the available settings for that specific layout and can make your required changes here.
Settings Options
All settings options are defined in  src / @jumbo / constants / themeOptions.js  file
theme
Here you can set the default theme for your project.

defaultLng
Here you can set the default language you want to enable for your project. Following is an example value for the English language which you will find the default language set in
1
{
2
  languageId: 'english',
3
  locale: 'en',
4
  name: 'English',
5
  icon: 'us',
6
}
Copied!
Note: For more information check the detailed topic https://docs-jumbo.g-axon.work/settings/language

layout
Here you can set the default layout for your project. All possible values for this object key can be found inside the src / @jumbo / constants / themeOptions.js  in the constant LAYOUT_TYPES.

layoutType
The layoutType is to set the container width of the page. There are three possible values for this object key:

LAYOUT_STYLES.BOXED
LAYOUT_STYLES.FULL_WIDTH
LAYOUT_STYLES.FRAMED

themeType
This option is to set the shade of your project theme. There are three possible values for this object key:

THEME_TYPES.LIGHT
THEME_TYPES.SEMI_DARK
THEME_TYPES.DARK

drawerBreakPoint 
Here you can set the breakpoint for the drawer. Below this breakpoint, the drawer (sidebar) will hide and will be available to show or hide with a toggle button. There are three breakpoints defined in the default however, you can define your own custom breakpoint too. 

Following the default breakpoints defined:

DRAWER_BREAK_POINT.SX
DRAWER_BREAK_POINT.SM
DRAWER_BREAK_POINT.MD

headerType
This option is to set the type of header you want in your layout. There are two possible values of this object key:

HEADER_TYPE.FIXED
HEADER_TYPE.STATIC

Note: This option will only work with the layouts having vertical navigation (sidebar).

sidebarType
This object key can be used to set the type of sidebar you want to use in your project. There are three possible values for this object key:

SIDEBAR.FULL
SIDEBAR.MINI
SIDEBAR.DRAWER

Note: This option will only work with the layouts having vertical navigation (sidebar).

isSidebarFixed
If value for this object key is set to true then the sidebar will behave as a fixed sidebar with scrollbar to scroll the inside content. Otherwise, if set to false, then the sidebar will scroll as the page scrolls.

Note: This option will only work with the layouts having vertical navigation (sidebar).

sidebarWidth
You can use this object key to set the width of the sidebar. There are following three pre-defined width constants:

SIDEBAR_WIDTH.DEFAULT
SIDEBAR_WIDTH.SMALL
SIDEBAR_WIDTH.WIDE
​
Note: 
1. You can update value for above constants or can define a new width by extending the object defined in src / @jumbo / constants / themeOptions.js
2. This option only works with the layouts have vertical navigation (sidebar)

showFooter
Option type is boolean. set true value to show footer.

Style Customization - Previous

Fonts

Next - Settings

Customize Horizontal Menu

Last modified 11mo ago

Copy link

Contents

Settings Options