matejch / yii2-sidebar-collapsible
Add sidebar that can be collapsed to smaller version
Installs: 195
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Type:yii2-widget
Requires
- php: >=7.2.0
- yiisoft/yii2: ~2.0.42
README
Sidebar widget you can add to your page with your own custom content
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist matejch/yii2-sidebar-collapsible "^1.0.1"
or add
"matejch/yii2-sidebar-collapsible": "^1.0.1"
to the require section of your composer.json
file.
Setup
Elements with [data-sidebar-hide] will be hidden when sidebar is collapsed
Example
<a><i class="fa fa-eye"></i> <span data-sidebar-hide='1'>This text is shown only when sidebar is not collapsed</span></a>
Elements with [data-sidebar-collapsible] will update their left padding when is sidebar size has changed
Example
<div data-sidebar-collapsible="1"></div>
Sidebar example with custom content
<?php Sidebar::begin([ 'collapseText' => 'Collapse', // Optional text in button, defaults to Collapse 'top' => '75px', //Optional Fixed top, where sidebar begins, defaults to 0px 'left' => '0px', //Optional Fixed left, where sidebar begins on letf side, defaults to 0px //'sidebarCacheName' => 'test', //Optional Name for saving state in localstorage 'widthOpen' => '256px', //Optional size when sidebar is opened 'widthCollapsed' => '70px', //Optional size when sidebar is colapsed 'topMobile' => '0px', //Optional 'leftMobile' => '0px', //Optional 'position' => 'fixed', //Optional 'positionMobile' => 'fixed' //Optional ]) ?> <div> <?= Html::a('<i class="fas fa-trash"></i> <span data-sidebar-hide="1">text will hide on collapse</span>', '#', ['class' => "btn btn-danger"]) ?> </div> <div> <?= Html::a('<i class="fas fa-edit"></i> <span data-sidebar-hide="1">text will hide on collapse</span>', '#', ['class' => "btn btn-primary"]) ?> </div> <div> <?= Html::a('<i class="fas fa-eye"></i> <span data-sidebar-hide="1">text will hide on collapse</span>', '#', ['class' => "btn btn-success"]) ?> </div> <div> <?= Html::a('<i class="fas fa-check"></i> <span data-sidebar-hide="1">text will hide on collapse</span>','#', ['class' => "btn btn-warning"]) ?> </div> <?php Sidebar::end() ?>