Widgets for AdminLte theme ¶
Use 3.x tags for yii >= 2.0.13
Use 2.x tags for yii < 2.0.13
- Box-widget with support collapse buttons and can save collapsed state in cookie support solid style
- Tile-widget - similar as box, with same options but with background
- Smallbox-widget
- Alert-widget
- Callout-widget
- Infobox-widget
- Flash-Alerts
- [Timeline Widget] (http://almsaeedstudio.com/themes/AdminLTE/pages/UI/timeline.html) - see more info about it in file Timeline.md
- ChatBox since 2.0
- LteSetup since 2.0
See http://almsaeedstudio.com/themes/AdminLTE/pages/widgets.html and http://almsaeedstudio.com/themes/AdminLTE/pages/UI/general.html examples
Independent of any AdminLte AssetBundles If you want use cookie collapsing boxes, set correct dependencies in AssetManager
'components'=>[
//--------
'assetManager'=>[
'class'=>'yii\web\AssetManager',
'bundles'=>[
//--------
'insolita\wgadminlte\JsCookieAsset'=>[
'depends'=>[
'yii\web\YiiAsset',
'namespace\for\AdminLteAsset', // for example 'dmstr\web\AdminLteAsset', if we use https://github.com/dmstr/yii2-adminlte-asset
]
],
'insolita\wgadminlte\CollapseBoxAsset'=>[
'depends'=>[
'insolita\wgadminlte\JsCookieAsset'
]
],
],
]
//--------
]
Installation ¶
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist insolita/yii2-adminlte-widgets "^3.2"
or add
"insolita/yii2-adminlte-widgets": "^3.2"
to the "require" section of your composer.json
file.
Usage ¶
- Box
<?php \insolita\wgadminlte\LteBox::begin([
'type'=>\insolita\wgadminlte\LteConst::TYPE_INFO,
'isSolid'=>true,
'boxTools'=>'<button class="btn btn-success btn-xs create_button" ><i class="fa fa-plus-circle"></i> Add</button>',
'tooltip'=>'this tooltip description',
'title'=>'Manage users',
'footer'=>'total 44 active users',
])?>
ANY BOX CONTENT HERE
<?php \insolita\wgadminlte\LteBox::end()?>
- Tile
<?php \insolita\wgadminlte\LteBox::begin([
'type'=>\insolita\wgadminlte\LteConst::COLOR_MAROON,
'tooltip'=>'Useful information!',
'title'=>'Attention!',
'isTile'=>true
])?>
ANY BOX CONTENT HERE
<?php \insolita\wgadminlte\LteBox::end()?>
Box with content as property
`
php <?php \insolita\wgadminlte\LteBox::widget(['type'=>\insolita\wgadminlte\LteConst::COLOR_MAROON, 'tooltip'=>'Useful information!', 'title'=>'Attention!', 'isTile'=>true, 'body'=>'Some Box content' ])?>
`
CollapseBox (Based on LteBox)
`
php <?php \insolita\wgadminlte\CollapseBox::begin(['type'=>\insolita\wgadminlte\LteConst::TYPE_INFO, 'collapseRemember' => true, 'collapseDefault' => false, 'isSolid'=>true, 'boxTools'=>'<button class="btn btn-success btn-xs create_button" ><i class="fa fa-plus-circle"></i> Добавить</button>', 'tooltip'=>'Описание содаржимого', 'title'=>'Управление пользователями', ])?> ANY BOX CONTENT HERE
<?php \insolita\wgadminlte\CollapseBox::end()?>
`
SmallBox
`
php
<?php echo \insolita\wgadminlte\LteSmallBox::widget([
'type'=>\insolita\wgadminlte\LteConst::COLOR_LIGHT_BLUE,
'title'=>'90%',
'text'=>'Free Space',
'icon'=>'fa fa-cloud-download',
'footer'=>'See All <i class="fa fa-hand-o-right"></i>',
'link'=>Url::to("/user/list")
]);?>
* InfoBox
```php
<?php echo \insolita\wgadminlte\LteInfoBox::widget([
'bgIconColor'=>\insolita\wgadminlte\LteConst::COLOR_AQUA,
'bgColor'=>'',
'number'=>100500,
'text'=>'Test Three',
'icon'=>'fa fa-bolt',
'showProgress'=>true,
'progressNumber'=>66,
'description'=>'Something about this'
])?>
- Callout
<?php \insolita\wgadminlte\Callout::widget([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_WARNING, 'head'=>'Operation Complete', 'text'=>'Something text bla-bla-bla bla-bla-blabla-bla-blabla-bla-blabla-bla-blabla-bla-blabla-bla-bla' ]);?> <?php \insolita\wgadminlte\Callout::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_WARNING, 'head'=>'Operation Complete' ]);?> <?php \insolita\wgadminlte\Callout::end()?>
* Alert
```php
<?=\insolita\wgadminlte\Alert::widget([
'type'=>\insolita\wgadminlte\LteConst::TYPE_SUCCESS,
'text'=>'Operation Complete',
'closable'=>true
]);?>
<?php
\insolita\wgadminlte\Alert::begin([
'type'=>\insolita\wgadminlte\LteConst::TYPE_SUCCESS,
'closable'=>true
]);?>
Some alert message
<?php \insolita\wgadminlte\Alert::end()?>
- FlashAlerts
Add in layout
<?= \insolita\wgadminlte\FlashAlerts::widget([
'errorIcon' => '<i class="fa fa-warning"></i>',
'successIcon' => '<i class="fa fa-check"></i>',
'successTitle' => 'Done!', //for non-titled type like 'success-first'
'closable' => true,
'encode' => false,
'bold' => false,
]); ?>
And set flash messages anywhere
Yii::$app->session->setFlash('info1','Message1');
Yii::$app->session->setFlash('info2','Message2');
Yii::$app->session->setFlash('info3','Message3');
Yii::$app->session->setFlash('success-first','Message');
Yii::$app->session->setFlash('success-second','Message');
Since 2.0
- ChatBox
<?php \insolita\wgadminlte\LteChatBox::begin([ 'type' => \insolita\wgadminlte\LteConst::TYPE_PRIMARY, 'footer'=>'<input type="text" name="newMessage">', 'title'=>'Messages', 'boxTools' => '<button class="btn btn-xs"><i class="fa fa-refresh"></i></button>' ]); echo \insolita\wgadminlte\LteChatMessage::widget([ 'isRight' => false, 'author' => 'Artur Green', 'message' => 'Some message bla-bla', 'image'=>'https://almsaeedstudio.com/themes/AdminLTE/dist/img/user3-128x128.jpg', 'createdAt' => '5 minutes ago' ]); echo \insolita\wgadminlte\LteChatMessage::widget([ 'isRight' => true, 'author' => 'Jane Smith', 'message' => 'Some message bla-bla', 'image'=>'https://almsaeedstudio.com/themes/AdminLTE/dist/img/user1-128x128.jpg', 'createdAt' => '2017-23-03 17:33' ]); \insolita\wgadminlte\LteChatBox::end(); ?>
Widget for configure lte settings
Add in layout
`
php
<?php
\insolita\wgadminlte\LteSetup::widget([
'animationSpeed' => 'fast',
'enableFastclick' => false,
'navbarMenuSlimscroll'=>false
//etc...
]);
?>
`
Following code can replicate most of the AdminLTE v2.4 demo page.
But first you must create the AssetFile and create the main layout file.
<?php namespace app\assets; use yii\web\AssetBundle; class LteAsset extends AssetBundle { public $sourcePath = '@vendor/almasaeed2010/adminlte/'; public $jsOptions = ['position' => \yii\web\View::POS_END]; public $css = [ 'bower_components/font-awesome/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic', // etc ]; public $js = [ 'bower_components/jquery-ui/jquery-ui.min.js', // etc ]; public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; }
<section class="content"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>\insolita\wgadminlte\LteConst::COLOR_AQUA, 'bgColor'=>'', 'number'=>1.410, 'text'=>'Messages', 'icon'=>'fa fa-envelope-o', 'showProgress'=>false, 'progressNumber'=>66, 'description'=>'' ])?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>\insolita\wgadminlte\LteConst::COLOR_GREEN, 'bgColor'=>'', 'number'=>410, 'text'=>'Bookmarks', 'icon'=>'fa fa-flag-o', 'showProgress'=>false, 'progressNumber'=>66, 'description'=>'' ])?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>\insolita\wgadminlte\LteConst::COLOR_YELLOW, 'bgColor'=>'', 'number'=>13.648, 'text'=>'Uploads', 'icon'=>'fa fa-files-o', 'showProgress'=>false, 'progressNumber'=>66, 'description'=>'' ])?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>\insolita\wgadminlte\LteConst::COLOR_RED, 'bgColor'=>'', 'number'=>93.139, 'text'=>'Likes', 'icon'=>'fa fa-star-o', 'showProgress'=>false, 'progressNumber'=>66, 'description'=>'' ])?> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>'rgba(0,0,0,0.2)', 'bgColor'=>\insolita\wgadminlte\LteConst::COLOR_AQUA, 'number'=>41.410, 'text'=>'Bookmarks', 'icon'=>'fa fa-bookmark-o', 'showProgress'=>true, 'progressNumber'=>66, 'description'=>'70% Increase in 30 Days ' ])?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>'rgba(0,0,0,0.2)', 'bgColor'=>\insolita\wgadminlte\LteConst::COLOR_GREEN, 'number'=>41.410, 'text'=>'Likes', 'icon'=>'fa fa-thumbs-o-up', 'showProgress'=>true, 'progressNumber'=>66, 'description'=>'70% Increase in 30 Days ' ])?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>'rgba(0,0,0,0.2)', 'bgColor'=>\insolita\wgadminlte\LteConst::COLOR_YELLOW, 'number'=>41.410, 'text'=>'Events', 'icon'=>'fa fa-calendar', 'showProgress'=>true, 'progressNumber'=>66, 'description'=>'70% Increase in 30 Days ' ])?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteInfoBox::widget([ 'bgIconColor'=>'rgba(0,0,0,0.2)', 'bgColor'=>\insolita\wgadminlte\LteConst::COLOR_RED, 'number'=>41.410, 'text'=>'Comments', 'icon'=>'fa fa-comments-o', 'showProgress'=>true, 'progressNumber'=>66, 'description'=>'70% Increase in 30 Days ' ])?> </div> </div> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteSmallBox::widget([ 'type'=>\insolita\wgadminlte\LteConst::COLOR_AQUA, 'title'=>'150', 'text'=>'New Orders', 'icon'=>'fa fa-shopping-cart', 'footer'=>'More info</i>', 'link'=>\yii\helpers\Url::to("/user/list") ]);?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteSmallBox::widget([ 'type'=>\insolita\wgadminlte\LteConst::COLOR_GREEN, 'title'=>'53%', 'text'=>'Bounce Rate', 'icon'=>'ion ion-stats-bars', 'footer'=>'More info</i>', 'link'=>\yii\helpers\Url::to("/user/list") ]);?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteSmallBox::widget([ 'type'=>\insolita\wgadminlte\LteConst::COLOR_YELLOW, 'title'=>'44', 'text'=>'User Registrations', 'icon'=>'ion ion-person-add', 'footer'=>'More info</i>', 'link'=>\yii\helpers\Url::to("/user/list") ]);?> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <?php echo \insolita\wgadminlte\LteSmallBox::widget([ 'type'=>\insolita\wgadminlte\LteConst::COLOR_RED, 'title'=>'65', 'text'=>'Unique Visitors', 'icon'=>'ion ion-pie-graph', 'footer'=>'More info</i>', 'link'=>\yii\helpers\Url::to("/user/list") ]);?> </div> </div> <!-- Expandable boxes - row 1: --> <div class="row"> <div class="col-md-3"> <?php \insolita\wgadminlte\CollapseBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_DEFAULT, 'collapseRemember' => false, 'collapseDefault' => true, 'isSolid'=>false, 'boxTools'=>'', 'tooltip'=>'Tip text', 'title'=>'Expandable', 'withBorder'=>true, //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\CollapseBox::end()?> </div> <div class="col-md-3"> <?php \insolita\wgadminlte\CollapseBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_SUCCESS, 'collapseRemember' => false, 'collapseDefault' => false, //'collapseRemove' => true, // must be implemented 'isSolid'=>false, 'boxTools'=>'', 'tooltip'=>'Tip text', 'title'=>'Removable - Works after modification', 'withBorder'=>true, //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\CollapseBox::end()?> </div> <div class="col-md-3"> <?php \insolita\wgadminlte\CollapseBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_WARNING, 'collapseRemember' => false, 'collapseDefault' => false, 'isSolid'=>false, 'boxTools'=>'', 'tooltip'=>'Tip text', 'title'=>'Collapsable', 'withBorder'=>true, //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\CollapseBox::end()?> </div> <div class="col-md-3"> <?php \insolita\wgadminlte\LteBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_DANGER, 'isSolid'=>false, //'waitingOverlay' => true, // must be implemented 'boxTools'=>'', 'tooltip'=>'this tooltip description', 'title'=>'Loading state - Works after modification', //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\LteBox::end()?> </div> </div> <!-- Expandable boxes - row 2: --> <div class="row"> <div class="col-md-3"> <?php \insolita\wgadminlte\CollapseBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_DEFAULT, 'collapseRemember' => false, 'collapseDefault' => true, 'isSolid'=>true, 'boxTools'=>'', 'tooltip'=>'Tip text', 'title'=>'Expandable', 'withBorder'=>true, //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\CollapseBox::end()?> </div> <div class="col-md-3"> <?php \insolita\wgadminlte\CollapseBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_SUCCESS, 'collapseRemember' => false, 'collapseDefault' => false, //'collapseRemove' => true, // must be implemented 'isSolid'=>true, 'boxTools'=>'', 'tooltip'=>'Tip text', 'title'=>'Removable - Works after modification', 'withBorder'=>true, //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\CollapseBox::end()?> </div> <div class="col-md-3"> <?php \insolita\wgadminlte\CollapseBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_WARNING, 'collapseRemember' => false, 'collapseDefault' => false, 'isSolid'=>true, 'boxTools'=>'', 'tooltip'=>'Tip text', 'title'=>'Collapsable', 'withBorder'=>true, //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\CollapseBox::end()?> </div> <div class="col-md-3"> <?php \insolita\wgadminlte\LteBox::begin([ 'type'=>\insolita\wgadminlte\LteConst::TYPE_DANGER, 'isSolid'=>true, 'boxTools'=>'', //'waitingOverlay' => true, // must be implemented 'tooltip'=>'this tooltip description', 'title'=>'Loading state - Works after modification', //'footer'=>'total 44 active users', ])?> The body of the box <?php \insolita\wgadminlte\LteBox::end()?> </div> </div> <?php \insolita\wgadminlte\LteChatBox::begin([ 'type' => \insolita\wgadminlte\LteConst::TYPE_PRIMARY, 'footer'=>'<form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary btn-flat">Send</button> </span> </div> </form>', 'title'=>'Messages', 'boxTools' => ' <span data-toggle="tooltip" title="" class="badge bg-light-blue" data-original-title="3 New Messages">3</span> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-widget="chat-pane-toggle" data-original-title="Contacts"> <i class="fa fa-comments"></i> </button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>' ]); echo \insolita\wgadminlte\LteChatMessage::widget([ 'isRight' => false, 'author' => 'Radovan Cerny', 'message' => 'Some message bla-bla', 'image'=>'https://scontent.fprg1-1.fna.fbcdn.net/v/t1.0-9/28951287_1623293104418397_2330954808937552963_n.jpg?_nc_cat=106&ccb=1-3&_nc_sid=174925&_nc_ohc=kw558xbM_GAAX98zpX4&_nc_ht=scontent.fprg1-1.fna&oh=43d662585ee11464772d573d9d495c18&oe=607906A6', 'createdAt' => '5 minutes ago' ]); echo \insolita\wgadminlte\LteChatMessage::widget([ 'isRight' => true, 'author' => 'Radin Black', 'message' => 'Some message bla-bla', 'image'=>'https://scontent.fprg1-1.fna.fbcdn.net/v/t1.0-9/28951287_1623293104418397_2330954808937552963_n.jpg?_nc_cat=106&ccb=1-3&_nc_sid=174925&_nc_ohc=kw558xbM_GAAX98zpX4&_nc_ht=scontent.fprg1-1.fna&oh=43d662585ee11464772d573d9d495c18&oe=607906A6', 'createdAt' => '2017-23-03 17:33' ]); \insolita\wgadminlte\LteChatBox::end(); ?> </section> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_NAVY?>">COLOR_NAVY</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_LIGHT_BLUE?>">COLOR_LIGHT_BLUE</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_BLUE?>">COLOR_BLUE</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_AQUA?>">COLOR_AQUA</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_RED?>">COLOR_RED</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_GREEN?>">COLOR_GREEN</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_YELLOW?>">COLOR_YELLOW</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_PURPLE?>">COLOR_PURPLE</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_MAROON?>">COLOR_MAROON</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_TEAL?>">COLOR_TEAL</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_OLIVE?>">COLOR_OLIVE</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_LIME?>">COLOR_LIME</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_ORANGE?>">COLOR_ORANGE</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_FUCHSIA?>">COLOR_FUCHSIA</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_BLACK?>">COLOR_BLACK</div> <div style="background-color:<?=\insolita\wgadminlte\LteConst::COLOR_GRAY?>">COLOR_GRAY</div>
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.