Layout API

Opens or Closes the Sidebar based on its current state

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_toggle">Toggle Sidebar</button>

JS Code

Dashmix.layout('sidebar_toggle');

Opens the Sidebar

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_open">Open Sidebar</button>

JS Code

Dashmix.layout('sidebar_open');

Closes the Sidebar

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_close">Close Sidebar</button>

JS Code

Dashmix.layout('sidebar_close');

Sets the Sidebar position to the left or to the right based on its current position

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_pos_toggle">Toggle Sidebar Position</button>

JS Code

Dashmix.layout('sidebar_pos_toggle');

Moves the Sidebar to the right

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_pos_right">Right Sidebar Position</button>

JS Code

Dashmix.layout('sidebar_pos_right');

Moves the Sidebar to the left

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_pos_left">Left Sidebar Position</button>

JS Code

Dashmix.layout('sidebar_pos_left');

Toggles the Sidebar Mini mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_mini_toggle">Toggle Mini Mode</button>

JS Code

Dashmix.layout('sidebar_mini_toggle');

Enables the Sidebar Mini mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_mini_on">Enable Mini Mode</button>

JS Code

Dashmix.layout('sidebar_mini_on');

Disables the Sidebar Mini mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_mini_off">Disable Mini Mode</button>

JS Code

Dashmix.layout('sidebar_mini_off');

Toggles Sidebar style between light and dark variations

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_style_toggle">Toggle Sidebar Style</button>

JS Code

Dashmix.layout('sidebar_style_toggle');

Sets the Sidebar to light variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_style_light">Light Themed Sidebar</button>

JS Code

Dashmix.layout('sidebar_style_light');

Sets the Sidebar to dark variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="sidebar_style_dark">Dark Themed Sidebar</button>

JS Code

Dashmix.layout('sidebar_style_dark');

Opens or Closes the Side Overlay based on its current state

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_toggle">Toggle Side Overlay</button>

JS Code

Dashmix.layout('side_overlay_toggle');

Opens the Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_open">Open Side Overlay</button>

JS Code

Dashmix.layout('side_overlay_open');

Closes the Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_close">Close Side Overlay</button>

JS Code

Dashmix.layout('side_overlay_close');

Toggles the Side Overlay hover mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_mode_hover_toggle">Toggle Hover Mode</button>

JS Code

Dashmix.layout('side_overlay_mode_hover_toggle');

Enables the Side Overlay hover mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_mode_hover_on">Enable Hover Mode</button>

JS Code

Dashmix.layout('side_overlay_mode_hover_on');

Disables the Side Overlay hover mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_overlay_mode_hover_off">Disable Hover Mode</button>

JS Code

Dashmix.layout('side_overlay_mode_hover_off');

Toggles between native and custom scrolling in Sidebar and Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_scroll_toggle">Toggle Side Scrolling</button>

JS Code

Dashmix.layout('side_scroll_toggle');

Enables native scrolling in Sidebar and Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_scroll_native">Enable Native Scrolling</button>

JS Code

Dashmix.layout('side_scroll_native');

Enables custom scrolling in Sidebar and Side Overlay

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="side_scroll_custom">Enable Custom Scrolling</button>

JS Code

Dashmix.layout('side_scroll_custom');

Toggles Header mode between static and fixed

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_mode_toggle">Toggle Header Mode</button>

JS Code

Dashmix.layout('header_mode_toggle');

Sets the Header to static mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_mode_static">Static Header</button>

JS Code

Dashmix.layout('header_mode_static');

Sets the Header to fixed mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_mode_fixed">Fixed Header</button>

JS Code

Dashmix.layout('header_mode_fixed');

Toggles the Header glass variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_glass_toggle">Toggle Header Glass</button>

JS Code

Dashmix.layout('header_glass_toggle');

Enables the Header glass variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_glass_on">Enable Header Glass</button>

JS Code

Dashmix.layout('header_glass_on');

Disables the Header glass variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_glass_off">Disable Header Glass</button>

JS Code

Dashmix.layout('header_glass_off');

Toggles Header style between light and dark variations

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_style_toggle">Toggle Header Style</button>

JS Code

Dashmix.layout('header_style_toggle');

Sets the Header to light variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_style_light">Light Themed Header</button>

JS Code

Dashmix.layout('header_style_light');

Sets the Header to dark variation

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="header_style_dark">Dark Themed Header</button>

JS Code

Dashmix.layout('header_style_dark');

Toggles Footer mode between static and fixed

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="footer_mode_toggle">Toggle Footer Mode</button>

JS Code

Dashmix.layout('footer_mode_toggle');

Sets the Footer to static mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="footer_mode_static">Static Footer</button>

JS Code

Dashmix.layout('footer_mode_static');

Sets the Footer to fixed mode

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="footer_mode_fixed">Fixed Footer</button>

JS Code

Dashmix.layout('footer_mode_fixed');

Toggles between all available content layouts (boxed, narrow and full width)

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_toggle">Toggle Content Layout</button>

JS Code

Dashmix.layout('content_layout_toggle');

Sets the content layout to boxed

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_boxed">Boxed Content Layout</button>

JS Code

Dashmix.layout('content_layout_boxed');

Sets the content layout to narrow

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_narrow">Narrow Content Layout</button>

JS Code

Dashmix.layout('content_layout_narrow');

Sets the content layout to full width

Button Based

<button type="button" class="btn btn-dark" data-toggle="layout" data-action="content_layout_full_width">Full Width Content Layout</button>

JS Code

Dashmix.layout('content_layout_full_width');