Layout
- Docs
- Layout
Layout setup
You can set the default layout in the
src/slices/layouts/reducer.js
file.
const INIT_STATE = {
layoutType: layoutTypes.VERTICAL,
leftSidebarType: leftSidebarTypes.DARK,
layoutModeType: layoutModeTypes.LIGHTMODE,
layoutWidthType: layoutWidthTypes.FLUID,
layoutPositionType: layoutPositionTypes.FIXED,
topbarThemeType: topbarThemeTypes.LIGHT,
leftsidbarSizeType: leftsidbarSizeTypes.DEFAULT,
leftSidebarViewType: leftSidebarViewTypes.DEFAULT,
leftSidebarImageType: leftSidebarImageTypes.NONE,
preloader: preloaderTypes.DISABLE,
sidebarVisibilitytype: sidebarVisibilitytypes.SHOW
};
layoutType : layoutTypes.VERTICAL | To set default layout as Vertical |
---|---|
layoutType : layoutTypes.HORIZONTAL | To set default layout as Horizontal |
layoutType : layoutTypes.TWOCOLUMN | To set default layout as Two column |
layoutType : layoutTypes.SEMIBOX | To set default layout as Semibox |
layoutModeType : layoutModeTypes.LIGHTMODE | To set Light layout mode. |
layoutModeType : layoutModeTypes.DARKMODE | To set Dark layout mode. |
layoutWidthType : layoutWidthTypes.FLUID | To set layout width Fluid and left sidebar large. |
leftsidbarSizeType : leftsidbarSizeTypes.SMALLHOVER, layoutWidthTypes.BOXED | To set layout width Boxed and left sidebar on hover show menu. |
layoutPositionType : layoutPositionTypes.FIXED | To set layout position Fixed. |
layoutPositionType : layoutPositionTypes.SCROLLABLE | To set layout position Scrollable. |
topbarThemeType : topbarThemeTypes.LIGHT | To set the Light color of Topbar. |
topbarThemeType : topbarThemeTypes.DARK | To set the dark color of Topbar. |
leftsidbarSizeType : leftsidbarSizeTypes.DEFAULT | To set the Large left sidebar. |
leftsidbarSizeType : leftsidbarSizeTypes.COMPACT | To set the Compact left sidebar. |
leftsidbarSizeType : leftsidbarSizeTypes.SMALLICON | To set the Icon view left sidebar. |
leftsidbarSizeType : leftsidbarSizeTypes.SMALLHOVER | To set the Icon hover left sidebar. |
leftSidebarViewType : leftSidebarViewTypes.DEFAULT | To set the Default layout. |
leftSidebarViewType : leftSidebarViewTypes.DETACHED | To set the Detached layout. |
leftSidebarType : leftSidebarTypes.LIGHT | To set the Light color of left Sidebar. |
leftSidebarType : leftSidebarTypes.DARK | To set the Dark color of left Sidebar. |
leftSidebarType : leftSidebarTypes.GRADIENT | To set the GRADIENT color of left Sidebar. |
leftSidebarType : leftSidebarTypes.GRADIENT_2 | To set the GRADIENT_2 color of left Sidebar. |
leftSidebarType : leftSidebarTypes.GRADIENT_3 | To set the GRADIENT_3 color of left Sidebar. |
leftSidebarType : leftSidebarTypes.GRADIENT_4 | To set the GRADIENT_4 color of left Sidebar. |
leftSidebarImageType : leftSidebarImageTypes.NONE | To set the default None Image of left Sidebar Background. |
leftSidebarImageType : leftSidebarImageTypes.IMG1 | To set the default IMG1 Image of left Sidebar Background. |
leftSidebarImageType : leftSidebarImageTypes.IMG2 | To set the default IMG2 Image of left Sidebar Background. |
leftSidebarImageType : leftSidebarImageTypes.IMG3 | To set the default IMG3 Image of left Sidebar Background. |
leftSidebarImageType : leftSidebarImageTypes.IMG4 | To set the default IMG4 Image of left Sidebar Background. |
preloader: preloaderTypes.DISABLE, | To set the default Disable Preloader. |
sidebarVisibilitytype: sidebarVisibilitytypes.SHOW | To set the default visibility Show of left Sidebar. |
You can set the default layout in the
src/slices/layouts/reducer.ts
file.
export const initialState: LayoutState = {
layoutType: LAYOUT_TYPES.VERTICAL,
layoutModeType: LAYOUT_MODE_TYPES.LIGHTMODE,
leftSidebarType: LAYOUT_SIDEBAR_TYPES.DARK,
layoutWidthType: LAYOUT_WIDTH_TYPES.FLUID,
layoutPositionType: LAYOUT_POSITION_TYPES.FIXED,
topbarThemeType: LAYOUT_TOPBAR_THEME_TYPES.LIGHT,
leftsidbarSizeType: LEFT_SIDEBAR_SIZE_TYPES.DEFAULT,
leftSidebarViewType: LEFT_SIDEBAR_VIEW_TYPES.DEFAULT,
leftSidebarImageType: LEFT_SIDEBAR_IMAGE_TYPES.NONE,
preloader: PERLOADER_TYPES.DISABLE,
sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW
};
layoutType : LAYOUT_TYPES.VERTICAL | To set default layout as Vertical |
---|---|
layoutType : LAYOUT_TYPES.HORIZONTAL | To set default layout as Horizontal |
layoutType : LAYOUT_TYPES.TWOCOLUMN | To set default layout as Two column |
layoutType : LAYOUT_TYPES.SEMIBOX | To set default layout as Semibox |
layoutModeType : LAYOUT_MODE_TYPES.LIGHTMODE | To set Light layout mode. |
layoutModeType : LAYOUT_MODE_TYPES.DARKMODE | To set Dark layout mode. |
layoutWidthType : LAYOUT_WIDTH_TYPES.FLUID | To set layout width Fluid and left sidebar large. |
leftsidbarSizeType : LEFT_SIDEBAR_SIZE_TYPES.SMALLHOVER, LAYOUT_WIDTH_TYPES.BOXED | To set layout width Boxed and left sidebar on hover show menu. |
layoutPositionType : LAYOUT_POSITION_TYPES.FIXED | To set layout position Fixed. |
layoutPositionType : LAYOUT_POSITION_TYPES.SCROLLABLE | To set layout position Scrollable. |
topbarThemeType : LAYOUT_TOPBAR_THEME_TYPES.LIGHT | To set the Light color of Topbar. |
topbarThemeType : LAYOUT_TOPBAR_THEME_TYPES.DARK | To set the dark color of Topbar. |
leftsidbarSizeType : LEFT_SIDEBAR_SIZE_TYPES.DEFAULT | To set the Large left sidebar. |
leftsidbarSizeType : LEFT_SIDEBAR_SIZE_TYPES.COMPACT | To set the Compact left sidebar. |
leftsidbarSizeType : LEFT_SIDEBAR_SIZE_TYPES.SMALLICON | To set the Icon view left sidebar. |
leftsidbarSizeType : LEFT_SIDEBAR_SIZE_TYPES.SMALLHOVER | To set the Icon hover left sidebar. |
leftSidebarViewType : LEFT_SIDEBAR_VIEW_TYPES.DEFAULT | To set the Default layout. |
leftSidebarViewType : LEFT_SIDEBAR_VIEW_TYPES.DETACHED | To set the Detached layout. |
leftSidebarType : LAYOUT_SIDEBAR_TYPES.LIGHT | To set the Light color of left Sidebar. |
leftSidebarType : LAYOUT_SIDEBAR_TYPES.DARK | To set the Dark color of left Sidebar. |
leftSidebarType : LAYOUT_SIDEBAR_TYPES.GRADIENT | To set the Gradient 1 color of left Sidebar. |
leftSidebarType : LAYOUT_SIDEBAR_TYPES.GRADIENT_2 | To set the Gradient 2 color of left Sidebar. |
leftSidebarType : LAYOUT_SIDEBAR_TYPES.GRADIENT_3 | To set the Gradient 3 color of left Sidebar. |
leftSidebarType : LAYOUT_SIDEBAR_TYPES.GRADIENT_4 | To set the Gradient 4 design color of left Sidebar. |
leftSidebarImageType : LEFT_SIDEBAR_IMAGE_TYPES.NONE | To set the default None Image of left Sidebar Background. |
leftSidebarImageType : LEFT_SIDEBAR_IMAGE_TYPES.IMG1 | To set the default IMG1 Image of left Sidebar Background. |
leftSidebarImageType : LEFT_SIDEBAR_IMAGE_TYPES.IMG2 | To set the default IMG2 Image of left Sidebar Background. |
leftSidebarImageType : LEFT_SIDEBAR_IMAGE_TYPES.IMG3 | To set the default IMG3 Image of left Sidebar Background. |
leftSidebarImageType : LEFT_SIDEBAR_IMAGE_TYPES.IMG4 | To set the default IMG4 Image of left Sidebar Background. |
preloader: PERLOADER_TYPES.DISABLE, | To set the default Disable Preloader. |
sidebarVisibilitytype: SIDEBAR_VISIBILITY_TYPES.SHOW | To set the default visibility Show of left Sidebar. |
For Master Layout setup
You can set the default layout in the
src/slices/layouts/reducer.js
file. Other INIT_STATE
was same as above.
const INIT_STATE = {
layoutThemeType: layoutThemeTypes.DEFAULT,
layoutThemeColorType: layoutThemeColorTypes.DEFAULT,
};
layoutThemeType : layoutThemeTypes.DEFAULT | To set default theme as default |
---|---|
layoutThemeType : layoutThemeTypes.CORPORATE | To set default theme as Corporate |
layoutThemeType : layoutThemeTypes.CREATIVE | To set default theme as Creative |
layoutThemeType : layoutThemeTypes.GALAXY | To set default theme as Galaxy |
layoutThemeType : layoutThemeTypes.INTERACTIVE | To set default theme as Interactive |
layoutThemeType : layoutThemeTypes.MATERIAL | To set default theme as Material |
layoutThemeType : layoutThemeTypes.MINIMAL | To set default theme as Minimal |
layoutThemeType : layoutThemeTypes.MODERN | To set default theme as Modern |
layoutThemeType : layoutThemeTypes.SAAS | To set default theme as Saas |
layoutThemeType : layoutThemeTypes.CLASSIC | To set default theme as Classic |
layoutThemeType : layoutThemeTypes.VINTAGE | To set default theme as Vintage |
layoutThemeColorType : layoutThemeColorTypes.DEFAULT | To set default theme color as Default |
layoutThemeColorType : layoutThemeColorTypes.BLUE | To set default theme color as Blue |
layoutThemeColorType : layoutThemeColorTypes.GREEN | To set default theme color as Green |
layoutThemeColorType : layoutThemeColorTypes.PURPLE | To set default theme color as Purple |
You can set the default layout in the
src/slices/layouts/reducer.ts
file. Other INIT_STATE
was same as above.
export const initialState: LayoutState = {
layoutThemeType: LAYOUT_THEME_TYPES.DEFAULT,
layoutThemeColorType: LAYOUT_THEME_COLOR_TYPES.DEFAULT,
};
layoutThemeType : LAYOUT__THEME_TYPES.DEFAULT | To set default theme as Default |
---|---|
layoutThemeType : LAYOUT__THEME_TYPES.CORPORATE | To set default theme as Corporate |
layoutThemeType : LAYOUT__THEME_TYPES.CREATIVE | To set default theme as Creative |
layoutThemeType : LAYOUT__THEME_TYPES.GALAXY | To set default theme as Galaxy |
layoutThemeType : LAYOUT__THEME_TYPES.INTERACTIVE | To set default theme as Interactive |
layoutThemeType : LAYOUT__THEME_TYPES.MATERIAL | To set default theme as Material |
layoutThemeType : LAYOUT__THEME_TYPES.MINIMAL | To set default theme as Minimal |
layoutThemeType : LAYOUT__THEME_TYPES.MODERN | To set default theme as Modern |
layoutThemeType : LAYOUT__THEME_TYPES.SAAS | To set default theme as Saas |
layoutThemeType : LAYOUT__THEME_TYPES.CLASSIC | To set default theme as Classic |
layoutThemeType : LAYOUT__THEME_TYPES.VINTAGE | To set default theme as Vintage |
layoutThemeColorType : LAYOUT_THEME_COLOR_TYPES.DEFAULT | To set default theme color as Default |
layoutThemeColorType : LAYOUT_THEME_COLOR_TYPES.BLUE | To set default theme color as Blue |
layoutThemeColorType : LAYOUT_THEME_COLOR_TYPES.GREEN | To set default theme color as Green |
layoutThemeColorType : LAYOUT_THEME_COLOR_TYPES.PURPLE | To set default theme color as Purple |