README

Концепция

YIMP 是一个用于快速创建用户界面的面板。它不是现成的管理后台、CMS 或 CMF。需要自行编写或使用 Gii（附有模板）编写视图代码。

YIMP 包含一个针对移动设备优化的布局，包括应用程序标题、页面标题、面包屑、三个菜单（顶部、左侧和右侧）以及侧边栏小部件。这些属性在控制器中进行配置，并通过一个特殊对象 - 导航器 - 传递给布局。

通过 Composer 安装

建议使用 Composer 安装 YIMP。在命令行中输入以下命令进行安装：

php composer.phar require dmitrybtn/yii2-yimp:"~1.0.0"

或者

"dmitrybtn/yii2-yimp": "~1.0.0"

在您的 composer.json 文件的 require 部分添加以下内容：

快速入门

连接布局

布局存储在 vendor/dmitrybtn/yii2-yimp/views/layout 目录中。建议将布局代码复制到应用程序中。然而，在简单情况下，可以从包中连接布局，为此在应用程序设置中需要指定：

'layout' => '@dmitrybtn/yimp/views/layout',

连接导航器

在应用程序中，需要定义一个继承自 \dmitrybtn\yimp\Navigator 的类。这个类将用于从控制器向布局传输数据。它包含一组属性（完整列表请参阅 API 文档），这些属性在控制器中设置并在布局中显示。在应用程序中继承此类后，建议立即设置菜单，这些菜单不依赖于特定操作。例如，可以这样操作：

namespace app\components;

class Navigator extends \dmitrybtn\yimp\Navigator
{
    public function init()
    {
        parent::init();

        $this->menuLeft = [
            ['label' => 'Main menu'],
            ['label' => 'About', 'url' => ['/site/about']],
        ];
    }
}

在控制器中需要定义一个属性 nav，它是一个 Navigator 类的对象。在控制器操作中需要根据需要配置 nav 属性。例如，可以这样操作：

class SiteController extends \yii\web\Controller
{
    public $nav;

    public function init()
    {
        parent::init();

        $this->nav = new Navigator();
    }

    public function actionAbout()
    {
        $this->nav->title = 'About';

        ...
    }
}

连接 Gii

YIMP 包含用于 CRUD 和控制器的模板。在应用程序设置中指定这些模板即可连接它们。

    'modules' => [
        ...
        'gii' => [
             'class' => 'yii\gii\Module',
             'allowedIPs' => ['127.0.0.1', '::1'],
             'generators' => [
                 'crud' => [
                     'class' => 'yii\gii\generators\crud\Generator',
                     'templates' => [
                         'yimp' => '@dmitrybtn/yimp/gii/crud'
                     ]
                 ],
                 'controller' => [
                     'class' => 'yii\gii\generators\controller\Generator',
                     'templates' => [
                         'yimp' => '@dmitrybtn/yimp/gii/controller'
                     ]
                 ]
             ],
        ...
    ]

这些模板重写了 Gii 默认使用的模板，且更改尽可能最小。如果需要，您可以根据 Gii 的文档修改这些模板。

连接 ErrorAction

YIMP 包含一个 ErrorAction，可以按照 Yii 文档中的相应部分进行连接。

建议

建议将左侧菜单用作应用程序的主要菜单。顶部菜单用于当前用户的选项（登录、注销、配置文件设置）。右侧菜单用于当前操作的选项（例如，对于 View 操作，将显示 Update 和 Delete 选项）。建议在 Navigator 类的实现中配置左侧和顶部菜单，而右侧菜单则在操作代码中配置。

建议通过控制器的静态方法定义操作标题和面包屑。例如，可以这样操作：

class OrderController extends \yii\web\Controller
{
    public $nav;

    public function init()
    {
        parent::init();

        $this->nav = new Navigator();
    }

    public static function titleIndex()
    {
        return 'Заказы';
    }

    public static function titleView($order)
    {
        return 'Заказ № ' . $order->id;
    }

    public static function crumbsToIndex()
    {
        return [
            ['label' => static::titleIndex(), 'url' => ['index']]
        ];
    }

    public function actionIndex()
    {
        ...
        
        $this->nav->title = static::titleIndex();

        ...
    }

    public function actionView()
    {
        ...
        
        $this->nav->title = static::titleView();        
        $this->nav->crumbs = static::crumbsToIndex();

        ...
    }

}

在此示例中，OrderController 负责订单。操作 order/index 将具有标题 "订单"。显然，"订单" 也应该是应用程序主要菜单的条目，以及其他操作的面包屑的一部分。如你所见，你可以从应用程序的任何位置通过调用 OrderController::titleIndex() 方法来获取这个词。

类似地，对于面包屑。例如，如果出现一个名为 ItemController 的类，它负责订单中的商品，那么操作 item/create 可以有面包屑 "首页 / 订单 / 订单编号 1 / 添加商品"。要在 ItemController 中形成这样的面包屑，只需在类中调用 $this->nav->crumbs = OrderController::crumbsToView($item->order) 即可。

类似的实现方式在YIMP组成部分的Gii模板中。

此外

小部件

页脚和侧边栏中的空闲空间可用于小部件。如果您只想在特定动作中显示小部件，可以在该动作的视图中定义一个块

<?php $this->beginBlock(Yimp::SIDEBAR_RIGHT); ?>
    <div class="border rounded p-3 mt-3">
        <div class="h5">Caption</div>
        Your widget HTML
    </div>
<?php $this->endBlock(); ?>

在YIMP中使用块定义了常量Yimp::SIDEBAR_LEFT、Yimp::SIDEBAR_RIGHT和Yimp::FOOTER。

请注意，带小部件的侧边栏仅在较大屏幕（xl）上显示。对于较小屏幕，建议像表单元素控制那样重定义小部件。

图标

由于Bootstrap 4不支持图标，YIMP使用FontAwesome图标。它们在注册YIMP资源时连接，因此您可以根据FontAwesome文档在您的应用程序中使用它们。

菜单

使用导航器的menuLeft、menuRight和menuTop属性来设置左侧、右侧和顶部菜单。在这些属性中，需要指定yiisoft/bootstrap4/Nav::items属性的设置，例如

    public function actionIndex()
    {
        ... 

        $this->nav->menuRight = [
            ['label' => 'Options'],
            ['label' => static::titleCreate(), 'url' => ['create']],
        ];

        ...
    }

除了已知的设置外，还可以指定以下设置

active：在原始小部件中，它具有bool类型。在YIMP中，您还可以使用与路由掩码对应的字符串。例如，如果为主菜单指定'active' => 'order/*'，则该项将适用于OrderController的任何操作。详细信息请参阅MenuAdapter、RouteHelper。
visibleMode：YIMP为桌面设备和移动设备渲染两次每项菜单。如果您只想为一种类型的设备显示元素，请在此处指定Yimp::DESKTOP或YIMP::MOBILE。请注意，此设置与CSS无关。

样式化

YIMP是为了充分利用Bootstrap 4的功能而编写的。所有可以用Bootstrap 4类实现的事情都是这样做的。然而，对于一些元素，不得不定义自己的样式，这些样式主要使用Bootstrap 4变量来定义颜色。Yimp样式存储在文件vendor\dmitrybtn\yii2-yimp\assets\css\yimp.scss中。

如果您决定使用自己的样式表，则需要禁用Bootstrap和Yimp的样式，在应用程序设置中指定

    'assetManager' => [
        'bundles' => [
            'yii\bootstrap4\BootstrapAsset' => [
                'css' => [],
            ],
            'dmitrybtn\yimp\Asset' => [
                'css' => [],
            ]
        ]
    ]

дмитрийбтн / yii2-yimp

维护者

详细信息