README

Symfony 5 的灵活小部件系统。

安装

步骤 1: 下载包

打开命令行控制台，进入您的项目目录并执行以下命令以下载此包的最新稳定版本

$ composer require appaydin/pd-widget

此命令需要您已全局安装 Composer，具体请参考 Composer 文档中的安装章节。

步骤 2: 启用包

Symfony 4 中，包会自动激活。但如果出现错误，您可以手动安装。

然后，将包添加到项目 config/bundles.php 文件中注册的包列表中来启用它

<?php
// config/bundles.php

return [
    //...
    Pd\WidgetBundle\PdWidgetBundle::class => ['all' => true]
];

添加小部件路由

#config/routes.yaml

# Widget Routing
widget:
    resource: "@PdWidgetBundle/Resources/config/routing.yml"

编辑 Doctrine 设置（config/packages/doctrine.yaml）

doctrine:
    orm:
        resolve_target_entities:
            Pd\WidgetBundle\Entity\UserInterface: App\Entity\User

用户界面字段，输入现有授权系统的类。

步骤 3: 设置包（可选）

您可以指定小部件容器的模板。

# config/packages/framework.yaml

pd_widget:
    base_template: '@PdWidget/widgetBase.html.twig'
    return_route: 'admin_dashboard'

创建您的第一个小部件

步骤 1: 创建小部件事件监听器

小部件与事件一起工作。创建具有事件监听器的小部件

<?php
// src/Widgets/DashboardWidget.php

namespace App\Widgets;

use Pd\WidgetBundle\Builder\Item;
use Pd\WidgetBundle\Event\WidgetEvent;

class Dashboard
{
    public function builder(WidgetEvent $event)
    {
        // Get Widget Container
        $widgets = $event->getWidgetContainer();

        // Add Widgets
        $widgets
            ->addWidget((new Item('user_info', 3600)) // Add Cache Time or Default 3600 Second
                ->setGroup('admin')
                ->setName('widget_user_info.name')
                ->setDescription('widget_user_info.description')
                ->setTemplate('widgets/userInfo.html.twig')
                //->setContent('pdWidget Text Content')
                //->setRole(['USER_INFO_WIDGET'])
                ->setData(function () {
                    return ['userCount' => 5];
                })
                ->setOrder(5)
            );
    }
}

步骤 2: 创建小部件模板

您可以为小部件创建一个 Twig 模板，也可以仅使用文本内容。

# templates/userInfo.html.twig

{% if widget.isActive %}
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">
        <div class="card text-center bg-primary text-white widget_user_info">
            <div class="card-body">
                {# Action Button #}
                {% include '@PdWidget/widgetAction.html.twig' %}

                <span class="count">{{ widget.data.userCount }}</span>
                <h5 class="font-weight-light">{{ 'widget_user_info.count'|trans }}</h5>
            </div>
        </div>
    </div>
{% endif %}

步骤 3: 创建小部件服务

# config/services.yaml

# Load All Widgets
App\Widgets\:
    resource: '../src/Widgets/*'
    tags:
        - { name: kernel.event_listener, event: widget.start, method: builder }
        
# Load Single Widget
App\Widgets\DashboardWidget:
    tags:
        - { name: kernel.event_listener, event: widget.start, method: builder }

渲染小部件

创建过程非常简单。您应该使用小部件组来创建小部件。

# Render all 'admin' widget groups
{{ pd_widget_render('admin') }}

# Render selected widgets in 'admin' group
{{ pd_widget_render('admin', ['user_info']) }}

appaydin / pd-widget

维护者

详情