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 |