hoaaah / yii2-startbootstrap-sb-admin-2-asset
这是一个为 Startbootstrap SB Admin 2 模板配合 Bootstrap4 使用的库扩展
Requires
- bower-asset/startbootstrap-sb-admin-2: ~4.0
- yiisoft/yii2: *
- yiisoft/yii2-bootstrap4: *
This package is auto-updated.
Last update: 2024-09-17 11:14:56 UTC
README
此软件包包含 Startbootstrap SB Admin 2 的资产包,适用于 Yii2。
Startbootstrap SB Admin 2 是由 Start Bootstrap 创建的响应式 Bootstrap 4。
预览
Start Bootstrap 由 David Miller 创建并维护,他是 Blackrock Digital 的所有者。
Start Bootstrap 基于由 Mark Otto 和 Jacob Thorton 创建的 Bootstrap 框架。
需求
此资产包需要 Bootstrap 4。由于 Yii2 默认使用 Bootstrap 3,因此您必须安装并将每个 Bootstrap 3 资产包更改为 Bootstrap 4。您可以阅读这篇教程以迁移到 Yii2 Bootstrap 4。
安装
安装此扩展的首选方式是通过 composer。
运行
composer require hoaaah/yii2-startbootstrap-sb-admin-2-asset:dev-master
或将以下内容添加到您的 composer.json
文件的 require 部分。
"hoaaah/yii2-startbootstrap-sb-admin-2-asset": "*"
使用
您可以在 views-examples 文件夹中查看此库的示例用法
菜单小部件
您可以在侧边栏中使用菜单小部件。此小部件针对 Startbootstrap SB-Admin 2 模板进行了优化。此小部件与 SB-Admin 2 一样,仅支持 2 级菜单。
您可以在 views-exampale/views/layout/sidebar.php 中查看此小部件的示例用法。
use hoaaah\sbadmin2\widgets\Menu; echo Menu::widget([ 'options' => [ 'ulClass' => "navbar-nav bg-gradient-primary sidebar sidebar-dark accordion", 'ulId' => "accordionSidebar" ], // optional 'brand' => [ 'url' => ['/'], 'content' => <<<HTML <div class="sidebar-brand-icon rotate-n-15"> <i class="fas fa-laugh-wink"></i> </div> <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div> HTML ], 'items' => [ [ 'label' => 'Menu 1', 'url' => ['/menu1'], // Array format of Url to, will be not used if have an items 'icon' => 'fas fa-fw fa-tachometer-alt', // optional, default to "fa fa-circle-o 'visible' => true, // optional, default to true // 'options' => [ // 'liClass' => 'nav-item', // ] // optional ], [ 'type' => 'divider', // divider or sidebar, if not set then link menu // 'label' => '', // if sidebar we will set this, if divider then no ], [ 'label' => 'Menu 2', // 'icon' => 'fa fa-menu', // optional, default to "fa fa-circle-o 'visible' => true, // optional, default to true // 'subMenuTitle' => 'Menu 2 Item', // optional only when have submenutitle, if not exist will not have subMenuTitle 'items' => [ [ 'label' => 'Menu 2 Sub 1', 'url' => ['/menu21'], // Array format of Url to, will be not used if have an items ], [ 'label' => 'Menu 2 Sub 2', 'url' => ['/menu22'], // Array format of Url to, will be not used if have an items ], ] ], [ 'label' => 'Menu 3', 'visible' => true, // optional, default to true // 'subMenuTitle' => 'Menu 3 Item', // optional only when have submenutitle, if not exist will not have subMenuTitle 'items' => [ [ 'label' => 'Menu 3 Sub 1', 'url' => ['/menu21'], // Array format of Url to, will be not used if have an items ], [ 'label' => 'Menu 3 Sub 2', 'url' => ['/menu22'], // Array format of Url to, will be not used if have an items 'linkOptions' => [ 'onClick' => 'alert("This is onClick")', ] ], ] ], ] ]);
如您在上述示例中看到的,此小部件包含两个主要方法。
卡片小部件
您可以使用卡片小部件。此小部件将创建 bootstrap 卡片,并针对此模板进行了优化。
卡片的使用示例如下代码所示
use hoaaah\sbadmin2\widgets\Card; echo Card::widget([ 'type' => 'cardBorder', 'label' => 'Label', 'sLabel' => '1000', 'icon' => 'fas fa-calendar', 'options' => [ 'colSizeClass' => 'col-md-3', 'borderColor' => 'primary', ] ]);
如您在上述示例中看到的,此小部件包含一些方法。
待办事项
待办事项小部件
- 菜单
- 卡片边框
- 卡片框
- 头部菜单
- 根据参数设置头部颜色
- 等等
创建者
此资产包装由 hoaaah 创建并维护。