"Airframe Admin" - jQuery/HTML Version Details
Live Preview: http://dashboards.webkom.co/jquery/airframe​
Created: 12 Sep. 2019
By: Tomasz Owczarczyk
Email: [email protected]
This Airframe version is a standard HTML template using jQuery and Bootstrap 4. Most of the layouting and components you are able to find in the official Bootstrap Documentation.​
This Dashboard has some additional classes and JS components to achieve the final effect.
This component will keep the whole layout in place it should look like this.
<div class="layout layout--theme--light--primary"><div class="layout__sidebar"><!-- Optional element: Airframe Sidebar should be placed here --></div><div class="layout__wrap"><div class="layout__navbar"><!-- Bootstrap Navbars should be placed here, they can be stacked on on another --></div><div class="container><!-- Page Content should be placed here</div></div></div>
The layout component also supports theming you can add a specific class related to a particular theme which will add a color scheme to the whole layout (mainly sidebar and targeted navbars). Classes which are providing this feature have this format: layout--theme--<theme style>--<theme color>
. Here are the possible values for theme-style
and theme-color
:
theme-style
light
dark
color
theme-color
primary
success
info
warning
danger
indigo
purple
pink
yellow
Sidebar can contain a navigation menu and addtional information. Everything is organized in sections. It can be in a Slim state on larger displays, and collapsible on small screens. Example Sidebar:
<div class="sidebar sidebar--animations--enabled"><!-- This element will be displayed only on mobile and will collapse the sidebar when closed --><div class="sidebar__close"><a href="javascript:;" class="action--sidebar-trigger"><i class="fa fa-times-circle fa-fw"></i></a></div>​<!-- Sidebar contents are organized in sidebar__section elements --><div class="sidebar__section sidebar__hide-slim"><!-- Some non-scrollable content, visible only on non slim sidebar --></div>​<!-- This wrap will allow scrolling all of the sections inside on Mobile Screens --><div class="sidebar__mobile-fluid"><!--A fluid section will fill all of the available height in the sidebar,cover section will fill all of the available space inside. This combinationis mainly designed to place SidebarMenu component inside.--><div class="sidebar__section sidebar__section--fluid sidebar__section--cover"><!-- Sidebar Menu should be placed here --></div>​<!--This section will be at the bottom of the sidebar becauseof the fluid section defined above--><div class="sidebar__section"><!-- Sidebar Bottom content --></div></div></div>
sidebar--animations--enabled - will make the sidebar animated in most of the interactions
sidebar--slim - will allow the sidebar to be slim when collapsed on desktop
sidebar--collapse - will hide the sidebar, or make it slim if defined so
sidebar__mobile-fluid - all of the contents of that element will be scrollable on mobile sidebar
sidebar__section - building block of the sidebar
sidebar__section--fluid - section which will fill all available height of the sidebar
sidebar__section--cover - removes the section padding
sidebar__hide-slim - (helper) hides an element when the sidebar goes into slim mode
sidebar__show-slim - (helper) shows an element when the sidebar goes into slim mode
Provides navigation for the sidebar. Allows for multilevel nesting, may be in a slim form with dropdowns. Has to be placed in a fluid, covered section. Example Sidebar Menu:
<ul class="sidebar-menu"><!-- A single link without any nesting --><li class="sidebar-menu__entry"><!-- Link to the target page --><a href="/some-page" class="sidebar-menu__entry__link"><!-- Icon representing the link --><i class="fa fa-fw fa-th sidebar-menu__entry__icon"></i><!-- Content of the link --><span>Some Page</span></a></li>​<!-- Container which will have nested entries inside --><li class="sidebar-menu__entry sidebar-menu__entry--nested"><!-- Trigger which will expand the child entries on clicking --><a href="javascript:;" class="sidebar-menu__entry__link"><!-- Icon representing the trigger --><i class="fa fa-fw fa-home sidebar-menu__entry__icon"></i><!-- Content of the trigger --><span>Dashboards</span></a>​<!-- Contains the child entries --><ul class="sidebar-submenu"><!-- First Child Entry --><li class="sidebar-submenu__entry"><a class="sidebar-submenu__entry__link" href="/nested-page-1"><span>First Nested Page</span></a></li><!-- Second Child Entry --><li class="sidebar-submenu__entry"><a class="sidebar-submenu__entry__link" href="/nested-page-2"><span>Second Nested Page</span></a></li></ul></li></ul>
sidebar-menu - parent of the menu
sidebar-menu--slim - should be present when the sidebar is in slim collapsed mode
sidebar-menu__entry - contains the 0 level link
sidebar-menu__entry--nested - contains the 0 level nested links
sidebar-menu__entry--no-caret - removes the caret which is added by nested entries
sidebar-menu__link - level 0 link
sidebar-menuentryicon - icon representing a particular entry
sidebar-submenu - contains the nested entries
sidebar-submenu__entry - contains the nth level link
sidebar-submenu__entry--nested - contains the nth level nested links
sidebar-submenuentrylink - nth level link
Navbars are essentially Bootstraps navbars, but there are some additional classes which extend their behavior.
navbar-themed - will receive the theme colors from the layout theme class
navbar-shadow - will add a shadow at the bottom of the navbar
navbar-multi-collapse - allows to make the navbar collapse, not collapse all of the items, the underling container
should also have navbar-collapse-wrap
class
sidebar__brand - will add a theme color to a brand text
sidebar__link - should be used on additional links in sidebar, will add proper themed colors
sidebar__link--muted - muted modifier for the sidebar link
text-theme - will set the text color to the current theme
bg-theme - will set the background color to the current theme
You can add predefined script which will handle all of the sidebar behaviour: sidebar menu, sidebar collapsing, animations etc.
ag-grid-community 21.X.X
bootstrap 4.X.X
font-awesome 4.7.0
holderjs ^2.X.X
jquery 3.X.X
highcharts 7.X.X
peity 3.3.X
​