Layout API
Sidebar Visibility
| Live | JS | Button Attributes |
|---|---|---|
|
Opens or Closes the Sidebar based on its current state |
One.layout('sidebar_toggle');
|
data-toggle="layout" data-action="sidebar_toggle"
|
|
Opens the Sidebar |
One.layout('sidebar_open');
|
data-toggle="layout" data-action="sidebar_open"
|
|
Closes the Sidebar |
One.layout('sidebar_close');
|
data-toggle="layout" data-action="sidebar_close"
|
Sidebar Position
| Live | JS | Button Attributes |
|---|---|---|
|
Sets the Sidebar position to the left or to the right based on its current position |
One.layout('sidebar_pos_toggle');
|
data-toggle="layout" data-action="sidebar_pos_toggle"
|
|
Moves the Sidebar to the right |
One.layout('sidebar_pos_right');
|
data-toggle="layout" data-action="sidebar_pos_right"
|
|
Moves the Sidebar to the left |
One.layout('sidebar_pos_left');
|
data-toggle="layout" data-action="sidebar_pos_left"
|
Sidebar Mini
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles the Sidebar mini mode |
One.layout('sidebar_mini_toggle');
|
data-toggle="layout" data-action="sidebar_mini_toggle"
|
|
Enables the Sidebar mini mode |
One.layout('sidebar_mini_on');
|
data-toggle="layout" data-action="sidebar_mini_on"
|
|
Disables the Sidebar mini mode |
One.layout('sidebar_mini_off');
|
data-toggle="layout" data-action="sidebar_mini_off"
|
Sidebar Styles
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles Sidebar style between light and dark variations |
One.layout('sidebar_style_toggle');
|
data-toggle="layout" data-action="sidebar_style_toggle"
|
|
Sets the Sidebar to light variation (works with Dark Mode off) |
One.layout('sidebar_style_light');
|
data-toggle="layout" data-action="sidebar_style_light"
|
|
Sets the Sidebar to dark variation |
One.layout('sidebar_style_dark');
|
data-toggle="layout" data-action="sidebar_style_dark"
|
Side Overlay Visibility
| Live | JS | Button Attributes |
|---|---|---|
|
Opens or Closes the Side Overlay based on its current state |
One.layout('side_overlay_toggle');
|
data-toggle="layout" data-action="side_overlay_toggle"
|
|
Opens the Side Overlay |
One.layout('side_overlay_open');
|
data-toggle="layout" data-action="side_overlay_open"
|
|
Closes the Side Overlay |
One.layout('side_overlay_close');
|
data-toggle="layout" data-action="side_overlay_close"
|
Side Overlay Hover Mode
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles the Side Overlay hover mode |
One.layout('side_overlay_mode_hover_toggle');
|
data-toggle="layout" data-action="side_overlay_mode_hover_toggle"
|
|
Enables the Side Overlay hover mode |
One.layout('side_overlay_mode_hover_on');
|
data-toggle="layout" data-action="side_overlay_mode_hover_on"
|
|
Disables the Side Overlay hover mode |
One.layout('side_overlay_mode_hover_off');
|
data-toggle="layout" data-action="side_overlay_mode_hover_off"
|
Header Mode
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles Header mode between static and fixed |
One.layout('header_mode_toggle');
|
data-toggle="layout" data-action="header_mode_toggle"
|
|
Sets the Header to static mode |
One.layout('header_mode_static');
|
data-toggle="layout" data-action="header_mode_static"
|
|
Sets the Header to fixed mode |
One.layout('header_mode_fixed');
|
data-toggle="layout" data-action="header_mode_fixed"
|
Header Styles
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles Header style between light and dark variations |
One.layout('header_style_toggle');
|
data-toggle="layout" data-action="header_style_toggle"
|
|
Sets the Header to light variation (works with Dark Mode off) |
One.layout('header_style_light');
|
data-toggle="layout" data-action="header_style_light"
|
|
Sets the Header to dark variation |
One.layout('header_style_dark');
|
data-toggle="layout" data-action="header_style_dark"
|
Main Content
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles between all available content layouts (boxed, narrow and full width) |
One.layout('content_layout_toggle');
|
data-toggle="layout" data-action="content_layout_toggle"
|
|
Sets the content layout to boxed |
One.layout('content_layout_boxed');
|
data-toggle="layout" data-action="content_layout_boxed"
|
|
Sets the content layout to narrow |
One.layout('content_layout_narrow');
|
data-toggle="layout" data-action="content_layout_narrow"
|
|
Sets the content layout to full width |
One.layout('content_layout_full_width');
|
data-toggle="layout" data-action="content_layout_full_width"
|
Dark Mode
| Live | JS | Button Attributes |
|---|---|---|
|
Toggles Dark Mode |
One.layout('dark_mode_toggle');
|
data-toggle="layout" data-action="dark_mode_toggle"
|
|
Disables Dark Mode |
One.layout('dark_mode_off');
|
data-toggle="layout" data-action="dark_mode_off"
|
|
Enables Dark Mode |
One.layout('dark_mode_on');
|
data-toggle="layout" data-action="dark_mode_on"
|