UI - 用户界面

Note

此页面的内容需要进行重大更新。旧页面包含过时且可能不准确的信息。您仍然可以通过 Mautic Developer Documentation archived repository 访问它。

如果您有兴趣帮助开发此页面和其他新内容的，请考虑加入文档编写工作。

请阅读 Contributing Guidelines 和 Contributing to Mautic’s documentation 以开始您的贡献。

注入按钮

Mautic 会为插件分派事件 \Mautic\CoreBundle\CoreEvents::VIEW_INJECT_CUSTOM_BUTTONS，以便注册其按钮。 监听器接收一个 Mautic\CoreBundle\Event\CustomButtonEvent 对象。 使用以下描述的 addButton 方法注册该事件。

class Mautic\CoreBundle\Event\CustomButtonEvent

public function getLocation()

Returns:

按钮请求的位置。

public function getButtons()

Returns:

已注册按钮的数组。

Return type:

array

public function addButtons(array $buttons, $location = null, $route = null)

Parameters:

• $buttons (array[]) – 按钮数组。

• $location (string) – 要放置的按钮的位置。

• $route (string) – 路由。

public function addButton(array $button, $location = null, $route = null)

Parameters:

• $button (array[]) – 按钮数组格式详情.

• $location (string) – 要放置的按钮的位置。

• $route (string) – 路由。

一个插件可以将按钮注入到 Mautic UI 的五个位置。

位置	描述
\Mautic\CoreBundle\Templating\Helper\ButtonHelper::LOCATION_LIST_ACTIONS	在列表视图中的每个项目的下拉操作。
\Mautic\CoreBundle\Templating\Helper\ButtonHelper::LOCATION_TOOLBAR_ACTIONS	位于列表视图表右侧的右上角，最好是仅带图标的按钮。
\Mautic\CoreBundle\Templating\Helper\ButtonHelper::LOCATION_PAGE_ACTIONS	位于标题右侧的主要 UI 按钮：新建、编辑等。 主要按钮显示为按钮，其余显示在下拉菜单中。
\Mautic\CoreBundle\Templating\Helper\ButtonHelper::LOCATION_NAVBAR	位于 UI 顶部，位于帐户/个人资料菜单的左侧。 带文本和/或图标的按钮。
\Mautic\CoreBundle\Templating\Helper\ButtonHelper::LOCATION_BULK_ACTIONS	位于批量下拉菜单中的按钮，位于列表的“全选”复选框周围。

按钮使用优先级系统来确定顺序。 优先级越高，按钮就显示在按钮列表的越前面。 优先级越低，按钮就显示在按钮列表的越后面。 对于下拉式按钮，将一个按钮设置为 primary 会将其显示在按钮组中，而不是下拉菜单中。

注册集成以注入按钮

<?php
// plugins/HelloWorldBundle/Event/ButtonSubscriber.php

namespace MauticPlugin\HelloWorldBundle\EventListener;


use Mautic\CoreBundle\CoreEvents;
use Mautic\CoreBundle\Event\CustomButtonEvent;
use Mautic\CoreBundle\EventListener\CommonSubscriber;
use Mautic\CoreBundle\Templating\Helper\ButtonHelper;
use Mautic\LeadBundle\Entity\Lead;

class ButtonSubscriber extends CommonSubscriber
{
    public static function getSubscribedEvents()
    {
        return [
            CoreEvents::VIEW_INJECT_CUSTOM_BUTTONS => ['injectViewButtons', 0]
        ];
    }

    /**
     * @param CustomButtonEvent $event
     */
    public function injectViewButtons(CustomButtonEvent $event)
    {
        // 为任何具有高优先级的页面，在工具栏区域注入一个按钮（显示在前面）
        $event->addButton(
            [
                'attr'      => [
                    'class'       => 'btn btn-default btn-sm btn-nospin',
                    'data-toggle' => 'ajaxmodal',
                    'data-target' => '#MauticSharedModal',
                    'href'        => $this->router->generate('mautic_world_action', ['objectAction' => 'doSomething']),
                    'data-header' => 'Extra Button',
                ],
                'tooltip'   => $this->translator->trans('mautic.world.dosomething.btn.tooltip'),
                'iconClass' => 'fa fa-star',
                'priority'  => 255,
            ],
            ButtonHelper::LOCATION_TOOLBAR_ACTIONS
        );

```markdown //

if ($lead = $event->getItem()) {

if ($lead instanceof Lead) {

$sendEmailButton = [

‘attr’ => [

‘data-toggle’ => ‘ajaxmodal’, ‘data-target’ => ‘#MauticSharedModal’, ‘data-header’ => $this->translator->trans(

‘mautic.world.dosomething.header’, [‘%email%’ => $event->getItem()->getEmail()]

), ‘href’ => $this->router->generate(

‘mautic_world_action’, [‘objectId’ => $event->getItem()->getId(), ‘objectAction’ => ‘doSomething’]

),

], ‘btnText’ => ‘Extra Button’, ‘iconClass’ => ‘fa fa-star’, ‘primary’ => true, ‘priority’ => 255,

];

// Inject a button into the page actions for the specified route (in this case /s/contacts/view/{contactId}) $event

->addButton(

$sendEmailButton, // Location of where to inject the button; this can be an array of multiple locations ButtonHelper::LOCATION_PAGE_ACTIONS, [‘mautic_contact_action’, [‘objectAction’ => ‘view’]]

) // Inject a button into the list actions for each contact on the /s/contacts page ->addButton(

$sendEmailButton, ButtonHelper::LOCATION_LIST_ACTIONS, ‘mautic_contact_index’

);

}

}

}

}

按钮数组格式

定义按钮的数组可以包含以下键：

键	类型	描述
attr	array[]	要附加到按钮上的属性数组（数据属性、href 等）
btnText	string	按钮上显示的文本
iconClass	string	用作按钮内图标的 Font Awesome 类
tooltip	string	作为工具提示显示的文本
primary	boolean	对于按钮下拉格式，此选项将以组的形式显示按钮，而不是在下拉列表中。
priority	int	确定按钮的顺序。 值越高，按钮越靠近第一个按钮。 具有相同优先级的按钮按字母顺序排序。

```

如果按钮需要显示确认模态框，则必须使用 confirm 键。一个 confirm 数组可以包含以下键：

键	类型	描述
message	string	在确认窗口中显示的翻译消息
confirmText	string	作为确认按钮显示的文本
confirmAction	string	按钮的 href 属性
cancelText	string	作为取消按钮显示的文本
cancelCallback	string	当单击取消按钮时执行的 Mautic 命名空间的 JavaScript 方法。
confirmCallback	string	当单击确认按钮时执行的 Mautic 命名空间的 JavaScript 方法
precheck	string	在显示确认模态框之前执行的 Mautic 命名空间的 JavaScript 方法
btnClass	string	按钮的类名
iconClass	string	用作图标的 Font Awesome 类名
btnTextAttr	string	要附加到按钮内部文本的属性字符串
attr	array[]	要附加到按钮外部标签的属性数组
tooltip	string	用作工具提示显示的翻译字符串
tag	string	用作按钮的标签。默认为 a 标签。
wrapOpeningTag	string	用于包装按钮的标签/HTML。默认为无。
wrapClosingTag	string	用于关闭 wrapOpeningTag 的标签/HTML。默认为无。

在与 confirm 键相同的嵌套级别，可以包含 primary 和/或 priority。

定义按钮位置

<?php
$dropdownOpenHtml = '<button type="button" class="btn btn-default btn-nospin  dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-caret-down"></i></button>'
          ."\n";
$dropdownOpenHtml .= '<ul class="dropdown-menu dropdown-menu-right" role="menu">'."\n";

echo $view['buttons']->reset($app->getRequest(), 'custom_location')->renderButtons($dropdownOpenHtml, '</ul>');

一个插件可以定义自己的位置，其他插件可以通过使用 buttons 辅助函数来利用这些位置。

支持三种类型的按钮组：

• • Type

    • Description

  • • MauticCoreBundleTemplatingHelperButtonHelper::TYPE_BUTTON_DROPDOWN

    • 主要按钮会显示在按钮组中，而其他按钮会显示在下拉菜单中。

  • • MauticCoreBundleTemplatingHelperButtonHelper::TYPE_DROPDOWN

    • 按钮显示在下拉菜单中。

  • • MauticCoreBundleTemplatingHelperButtonHelper::TYPE_GROUP

    • 一组按钮并排显示。

下拉菜单需要包含包裹 HTML，以便传递给 renderButtons 方法。