Accordion 组件

简介

Accordion 组件允许开发人员在其 Mautic 模板中创建可折叠的部分。此组件用于将内容组织成可展开和可折叠的面板，通过使大量内容更易于管理来增强用户体验。

模板结构

accordion.html.twig 模板定义了此 Accordion 组件。该模板采用列表结构 <ul>，其中每个项目 <li> 代表一个 Accordion 面板。每个面板由标题和一个可折叠的内容部分组成。

主要特性

单击标题可以展开或折叠每个 Accordion 项目。
此组件包含 ARIA 属性以提高可访问性。
您可以使用 Twig 变量自定义每个 Accordion 面板的内容。

应用 Accordion 组件

要使用 Accordion 组件，请将其包含在您的模板中并传递必要的数据。

定义您想要包含在 Accordion 中的内容。例如，如果您想包含一组 UTM 标签字段，您可以按以下方式定义内容：

{% set utmTagsContent %}
    {% for i, utmTag in form.utmTags %}
        {{ form_row(utmTag) }}
    {% endfor %}
{% endset %}

Note

例如，您可以循环遍历表单字段或任何其他数据以动态生成内容。

在您的主模板中包含 accordion.html.twig 模板并传递一个数组，其中每个项目应具有以下属性：

id: 一个唯一标识符。
title: Accordion 项目的标题。
padding_inline: 可选布尔值，用于控制内容内的内边距。如果未定义，则默认为 true。
content: 当项目展开时显示的内容。

示例：

{% include '@MauticCore/Helper/accordion.html.twig' with {
    'items': [
        {
            'id': 'UTM',
            'title': 'mautic.email.utm_tags',
            'padding_inline': false,
            'content': utmTagsContent,
        }
    ]
} %}

虽然单独定义 set 块不是严格必需的，但它可以帮助确保依赖于 Twig 函数的操作继续正常工作。 set 块允许您预定义复杂的内容或操作，从而使您的模板更清晰、更易于维护。

没有 set 块的示例

如果您的内容很简单，您可以直接将其包含在 items 数组中，而无需使用 set 块。以下是一个示例：

{% include '@MauticCore/Helper/accordion.html.twig' with {
    'items': [
        {
            'id': 'Example',
            'title': 'Example Title',
            'padding_inline': true,
            'content': '<p>This is a simple content example.</p>',
        }
    ]
} %}

这种灵活性允许您根据每个情况选择最佳方法。

自动 CSS 处理

当使用此组件时，所有必要的 CSS 样式都将为您自动处理。这意味着该组件预定义了类，例如 accordion-heading、accordion-wrapper 和 accordion-content，从而确保开箱即用的统一且美观的外观。

该组件包含预定义的 CSS 类，用于管理手风琴的布局、间距和交互元素。
您无需添加任何额外的 CSS 即可使手风琴正常运行并具有视觉吸引力。
它使用现有的 Bootstrap 函数来折叠面板。
请避免在您自己的 CSS 中覆盖这些类。

手风琴的设计使其易于实现，所有必要的 CSS 样式都已预先设置。这允许您专注于集成和使用该组件，而无需担心额外的样式。

完整示例

以下是一个完整的示例，演示如何在 Mautic 模板中使用此组件：

{% set utmTagsContent %}
    {% for i, utmTag in form.utmTags %}
        {{ form_row(utmTag) }}
    {% endfor %}
{% endset %}

{% include '@MauticCore/Helper/accordion.html.twig' with {
    'items': [
        {
            'id': 'UTM',
            'title': 'mautic.email.utm_tags',
            'padding_inline': false,
            'content': utmTagsContent,
        }
    ]
} %}

对于更复杂的结构，例如包含数十个手风琴项的结构，您可能更喜欢复制该结构并构建一些独特的内容，但最佳方法是将每个内容放在一个块中。