Layout

Layout setup

You can set the default layout in the js/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
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.

Master Layout setup

You can set the default layout in the js/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