README

Symfony 的扩展，用于在应用程序内部创建用户指南。
用户指南在模板内部的应用程序中显示。

要求

该扩展需要将资源安装到公共目录。

安装

1. 使用 composer 安装该扩展

composer require norvutec/userguide

1. 将扩展添加到内核（如果未使用 symfony/flex）

// config/bundles.php
return [
    // ...
    Norvutec\UserguideBundle\NorvutecUserguideBundle::class => ['all' => true],
];

1. 将样式和脚本添加到您的模板

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('bundles/norvutecuserguide/css/userguide.css') }}">
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ userGuideJavascript() }}
{% endblock %}

1. 将用户指南类添加到您的应用程序

class InvoiceFormUserGuide extends UserGuide {

    public function name(): string
    {
        return "invoiceform";
    }

    public function configure(UserGuideBuilder $builder): void {
        $builder
            ->route("app_accounting_invoice_new") # Main Route for the guide
            ->alternateRoute("app_accounting_invoice_edit") # Alternate Route for the guide
            ->add("[id$=form_invoiceNo]", "Insert Number of invoice here") # Add a step to the guide
            ->add("[id$=form_customer]", "Select customer here"); # Add a step to the guide
    }
}

必须按正确的顺序调用 add(Selector, Content, Options) 方法以生成指南。其中 Selector 是 DOM 元素的 JavaScript 选择器。您可以使用所有可用的 querySelector 语法。指南将使用第一个找到的元素作为步骤链接。

1. 在您的模板内部包含开始按钮（可选）（待办事项）

{{ userGuideButton() }}

配置/覆盖

路径安全

用户指南扩展包含一个用于列出所有可用用户指南的路径。默认情况下，此路径未加密。
所有路由都从 /userguide/ 开始，并以 userguide_ 命名。

模板

javascript_loader.html.twig 包含 userguide.js 的脚本标签和用户指南的自动继续。（由 userGuideJavascript() 加载）
tooltip.html.twig 是用户指南显示的提示框

样式

所有样式都位于 css/userguide.css 文件中。只需在您的 CSS 文件中覆盖样式即可。
或者，您可以覆盖模板并包含您自己的样式。

待办事项信息

endswith: [id$=foo] startswith[id^=foo]

覆盖 tooltip.html.twig