Yii Framework Extensions
insolita/yii2-adminlte-widgets Widgets for AdminLTE theme (Box with remember collapse state, Timeline, Tile, Callout, SmallBox etc)
3 followers
418 363 downloads
Yii Version: 2.0
License: MIT
Category: User Interface
Developed by: Insolita
Created on: Mar 23, 2018
Last updated: (not set)
Github Repository
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.