#4 — Expandable, Removable, Collapsable, Loading State Widget with AdminLTE

Previous lesson we experiment with widget that usually appear on admin panel. Now in same topic, we will create expandable, removable, collapsable, and loading state windows in AdminLTE.

AdminLTE have prepared all of thing that we need, we just use it and put it’s code into starter.html like our last lesson. Let’s start it.

A. Expandable Widget

Expandable widget is widget that in basic form expand but we can hide or collapse the body of the box. It’s really important if you have much widget on your admin panel. It will help organization your widget.

It is very easy, just copy and paste it into your Main Content

<div class=”row”>
<div class=”col-md-3">
<div class=”box box-default collapsed-box”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Expandable</h3>

<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”collapse”><i class=”fa fa-plus”></i>
</button>
</div>
</div>
<div class=”box-body”>
The body of the box
</div>
</div>
</div></div>

B. Removable Widget

Removable widget is widget that if we click cross icon (close), the widget will disappear but if you refresh the page the widget will back on your Admin Panel. So we can mention it removed temporary.

This code to create it :

<div class=”row”><div class=”col-md-3">
<div class=”box box-success”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Removable</h3>

<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove”><i class=”fa fa-times”></i></button>
</div>
</div>
<div class=”box-body”>
The body of the box
</div>
</div>
</div></div>

C. Collapse Widget

Collapse widget is widget that have basic form collapse the body, we can expand with click on plus (+) button on right corner. Seems like expandable widget, it’s very important to manage our widget.

Copy this this code :

<div class=”row”><div class=”col-md-3">
<div class=”box box-warning”>
<div class=”box-header with-border”>
<h3 class=”box-title”>Collapsable</h3>

<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”collapse”><i class=”fa fa-minus”></i>
</button>
</div>
</div>
<div class=”box-body”>
The body of the box
</div>
</div>
</div></div>

D. Loading State Widget

Loading state widget is widget that overlay with loading. when you need loading on widget.

Check this out for code :

<div class=”row”><div class=”col-md-3">
<div class=”box box-danger”>
<div class=”box-header”>
<h3 class=”box-title”>Loading state</h3>
</div>
<div class=”box-body”>
The body of the box
</div>
<div class=”overlay”>
<i class=”fa fa-refresh fa-spin”></i>
</div>
</div>
</div></div>