Features of AdminLTE 2.1

Features of AdminLTE 2.1

AdminLTE 2.1 offers a few new features that enhance the user experience in multiple ways. I will list some of the features in this article and discuss their markup.

Features of AdminLTE 2.1

  1. Sidebar Mini
  2. Control Sidebar
  3. 6 New Skins
  4. Download

Sidebar Mini

AdminLTE's Sidebar Mini

Sidebar mini provides the user with the ability to collapse the sidebar without losing accessibility to site navigation. Sidebar mini can be activated by simply adding the sidebar-mini class to the body tag.

<body class="skin-blue sidebar-mini">

To start the template with a collapsed sidebar, we need to add the class sidebar-collapse to the body tag.

<body class="skin-blue sidebar-mini sidebar-collapse">

Because AdminLTE uses SlimScroll for the fixed layout, it is not possible to mix sidebar-mini and the fixed layout. However, there is a simple solution that AdminLTE automatically applies in case the two configurations were found active, which is expand on hover. The gif bellow shows the behavior of the sidebar when a user hovers over it and the option expand on hover is enabled. Of course, if you like this effect and prefer to use it with the normal layout, you can always enable it from the javascript options.

Sidebar mini with fixed layout

Control Sidebar

The control sidebar is a new section to the layout. It adds the ability for a right sidebar that can be used for many purposes. The demo uses it to provide changable layout and skin options.

AdminLTE 2.1 Control Sidebar Example

The control sidebar is easily constructed by placing a couple of divs in the main wrapper. Right before the closing tag for the .wrapper div, add the following divs.

<!-- The sidebar container -->
<!-- Two skins are available control-sidebar-dark and control-sidebar-light -->
<div class="control-sidebar control-sidebar-dark">
    <!-- Place the content of the sidebar here -->
</div>
<!-- Add the sidebar's background. This div must be placed
   immediately after the control sidebar and should be left empty. -->
<div class='control-sidebar-bg'></div>

You can configure how the sidebar opens from the javascript options . By setting the controlSidebarOptions.slide option to false, the sidebar will force the content to shift to the left to make space for the sidebar.

A control sidebar toggle button can be any clickable object that has the attribute data-toggle="control-sidebar". Of course, that attribute could be customized through the javascript options. In the demo, the toggle button is a link in the navbar that displays the gears () icon.

What if you wanted to make the control sidebar visible by default?
Well, that's easily accomplished by adding the class control-sidebar-open to the body tag if the slide option is set to false or to the sidebar itself otherwise.

6 New Skins

AdminLTE 2.0 came with 6 original skins. In v2.1 we added 6 new skins that switches the color of the sidebar to a light color.

AdminLTE 2.1 Skins Preview

You can preview the skins in the documentation or through the control sidebar in the demo.

Download

The latest version of AdminLTE can be downloaded from Almsaeed Studio's homepage.

Conclusion

I hope you liked the new features of AdminLTE 2.1. We are looking forward for more improvements and enhancements, so feel free to post your issue, comment or suggestion below.

Comments