Layout API
There are various layouts that you can mix together. To make it easy, all layout can be applied by 2 ways: with a data-toggle attribute or direclty with a function.
For example, in your page, you can add a link or a button with data-toggle="rtl" attribute. On click, this will toggle RTL layout.
List of functions and data-toggle attribute
| Layout | Action | Function | Example with data-toggle |
|---|---|---|---|
| RTL Allow you to switch sidebar right to left (RTL). By default, sidebar is on left side. |
TOGGLE | toggleRTL() |
<a href="#" data-toggle="rtl">Toggle RTL</a> |
| ENABLE | enableRTL() | ||
| DISABLE | disableRTL() | ||
| Sidebar Fixed / Fluid Sidebar will scroll with content if fluid. It will not moved if fixed. |
TOGGLE | toggleSidebar() |
<a href="#" data-toggle="sidebar-behaviour">Toggle Sidebar Behaviour</a> |
| FIXED | handleSidebarFixed() | ||
| FLUID | handleSidebarFluid() | ||
| Topbar Fixed / Fluid Topbar will scroll with content if fluid. It will not moved if fixed. |
TOGGLE | toggleTopbar() |
<a href="#" data-toggle="topbar">Toggle Topbar Behaviour</a> |
| FIXED | handleTopbarFixed() | ||
| FLUID | handleTopbarFluid() | ||
| Submenu on Hover Sidebar submenu can be shown on the side of sidebar on mouse hover. By default, submenu show below each menu element in sidebar on click. |
TOGGLE | toggleSubmenuHover() |
<a href="#" data-toggle="submenu-hover">Toggle Submenu Hover</a> |
| ENABLE | createSubmenuHover() | ||
| DISABLE | removeSubmenuHover() | ||
| Sidebar on Top You can put sidebar at the top of the page, instead of in left or right side. By default, sidebar is on left side. |
TOGGLE | toggleSidebarTop() |
<a href="#" data-toggle="sidebar-top">Toggle Sidebar Top</a> |
| ENABLE | createSidebarTop() | ||
| DISABLE | removeSidebarTop() | ||
| Sidebar on Hover Sidebar can always be completly hidden. It will be appear if you put your mouse in the corner of your screen. By default, sidebar is visible (for screen > 1024px). |
TOGGLE | toggleSidebarHover() |
<a href="#" data-toggle="sidebar-hover">Toggle Sidebar Hover</a> |
| ENABLE | createSidebarHover() | ||
| DISABLE | removeSidebarHover() | ||
| Boxed Layout It's possible to have a centered admin with max 1200px. By default, template is full size (100% of the page). |
TOGGLE | toggleboxedLayout() |
<a href="#" data-toggle="boxed">Toggle Boxed</a> |
| ENABLE | createBoxedLayout() | ||
| DISABLE | removeBoxedLayout() | ||
| Sidebar Collapsed You can collapse sidebar with icon on topbar, but you can also control it from other element too. By default, sidebar is large. |
TOGGLE | collapsedSidebar() |
<a href="#" data-toggle="sidebar-collapsed">Toggle Collapsed Sidebar</a> |
| ENABLE | createCollapsedSidebar() | ||
| DISABLE | removeCollapsedSidebar() |