hoaaah/yii2-startbootstrap-sb-admin-2-asset

这是一个为 Startbootstrap SB Admin 2 模板配合 Bootstrap4 使用的库扩展

v0.1.3 2021-06-04 16:32 UTC

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

预览

SB Admin 2 Preview

启动实时预览

Start Bootstrap 由 David Miller 创建并维护,他是 Blackrock Digital 的所有者。

Start Bootstrap 基于由 Mark OttoJacob 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 创建并维护。