matejch/yii2-sidebar-collapsible

添加可折叠到较小版本的侧边栏

1.0.5 2022-06-11 16:22 UTC

This package is auto-updated.

Last update: 2024-09-11 21:22:49 UTC


README

侧边栏小部件,您可以在页面上添加自己的自定义内容

安装

安装此扩展的首选方式是通过 composer

运行以下命令之一:

php composer.phar require --prefer-dist matejch/yii2-sidebar-collapsible "^1.0.1"

或者将以下内容添加到您的 composer.json 文件的 require 部分。

"matejch/yii2-sidebar-collapsible": "^1.0.1"

安装

设置

具有 [data-sidebar-hide] 的元素将在侧边栏折叠时被隐藏

示例

<a><i class="fa fa-eye"></i> <span data-sidebar-hide='1'>This text is shown only when sidebar is not collapsed</span></a>

具有 [data-sidebar-collapsible] 的元素将在侧边栏大小改变时更新其左填充

示例

<div data-sidebar-collapsible="1"></div>

带有自定义内容的侧边栏示例

<?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() ?>