Layout API
Powerful and simple to use
You can either use Codebase.layout('_mode_');
or enable it on a button with the attributes data-toggle="layout" data-action="_mode_"
Live | Mode |
---|---|
Sidebar Visibility | |
sidebar_toggle
|
|
sidebar_open
|
|
sidebar_close
|
|
Mini Sidebar Mode Screen width greater than 991px | |
sidebar_mini_toggle
|
|
sidebar_mini_on
|
|
sidebar_mini_off
|
|
Sidebar Style | |
sidebar_style_toggle
|
|
sidebar_style_dark
|
|
(works with Dark Mode off) |
sidebar_style_light
|
Sidebar Position | |
sidebar_pos_toggle
|
|
sidebar_pos_left
|
|
sidebar_pos_right
|
|
Side Overlay Visibility | |
side_overlay_toggle
|
|
side_overlay_open
|
|
side_overlay_close
|
|
Side Overlay Hover Mode Screen width greater than 991px | |
side_overlay_mode_hover_toggle
|
|
side_overlay_mode_hover_on
|
|
side_overlay_mode_hover_off
|
|
Header Mode | |
header_mode_toggle
|
|
header_mode_fixed
|
|
header_mode_static
|
|
Header Modern Variation | |
header_modern_toggle
|
|
header_modern_on
|
|
header_modern_off
|
|
Header Glass Variation | |
header_glass_toggle
|
|
header_glass_on
|
|
header_glass_off
|
|
Header Dark Style | |
header_style_toggle
|
|
header_style_dark
|
|
(works with Dark Mode off) |
header_style_light
|
Header Search | |
header_search_on
|
|
header_search_off
|
|
Header Loading | |
header_loader_on
|
|
header_loader_off
|
|
Main Content Layout Screen width greater than 1200px | |
content_layout_toggle
|
|
content_layout_boxed
|
|
content_layout_narrow
|
|
content_layout_full_width
|
|
Dark Mode | |
dark_mode_toggle
|
|
dark_mode_off
|
|
dark_mode_on
|