P
P
Peter Gribanov2016-08-25 13:08:14
Twig
Peter Gribanov, 2016-08-25 13:08:14

How to write a Bootstrap Collapse template for Twig?

The project often uses a component like Bootstrap Collapse . It is slightly different, but the essence is the same.
The bottom line is that there is a block with a header, footer and body. The hat and footer are unchanged and only the body changes. That is, the layout scheme is superimposed very well, but it cannot be used because the block is on the page with its own layout and there are several such blocks on the page.
I googled the template from Drupal , but I don’t understand how they pass the block body to the template. There is also a lot of logic and html code.
I thought to write a macro for such a case, but again it is not clear how to pass the block body to the macro in this case. As an option, use a macro in a macro to render the body, but it even sounds crazy.

{% macro block_a(object) %}
{{ object.title }}
{% endmacro %}

{% macro block_b(object) %}
{{ object.desc }}
{% endmacro %}

{% macro collapse(body) %}
{{ body }}
{% endmacro %}

{% import _self as block %}

{{ block.collapse(block.block_a(object1)) }}
{{ block.collapse(block.block_b(object2)) }}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey Novikov, 2016-08-25
@BOOMER_74

Isn't going the easy route an option? Write a simple template:

{# Код до body #}
{{ body|raw }}
{# Код после body #}

And after inserting where necessary:
{% include "collapse.twig" with body only %}

P
Petr Gribanov, 2016-08-25
@ghost404

What happens to me on macros.

{# collapse.html.twig #}

{% macro tablist(cards, id) %}
    <div class="card-collapse" id="{{ id }}" role="tablist" aria-multiselectable="true">
        {% for card in cards %}
            {{ card }}
        {% endfor %}
    </div>
{% endmacro %}

{% macro card(title, extended, parent, target, body) %}
    <div class="card{% if extended %} extended{% endif %}">
        <div class="card-header card-header-collapsed">
            <a
                class="collapsed"
                data-toggle="collapse"
                data-parent="#{{ parent }}"
                href="#{{ target }}"
                aria-expanded="{% if extended %}true{% else %}false{% endif %}"
                aria-controls="collapseTree"
            >
                {{ title }}
                <span class=" pull-xs-right">
                    <i class="zmdi zmdi-chevron-down zmdi-hc-fw check"></i>
                    <i class="zmdi zmdi-chevron-up zmdi-hc-fw uncheck"></i>
                </span>
            </a>
        </div>
        <div class="collapse{% if extended %} in fade{% endif %} hasAccordion" id="{{ target }}"  role="tabpanel">
            {{ body }}
        </div>
    </div>
{% endmacro %}

{# game.html.twig #}

{% macro form(form) %}
    <div class="card-block">
        {{ form_row(form) }}
    </div>
    <div class="card-block clearfix">
        <button type="submit" class="btn btn-link card-link pull-xs-right">Применить</button>
    </div>
{% endmacro %}

{% macro login() %}
    <div class="card-block bg-warning">
        Для того чтобы сохранять свои результаты в игре, войдите в систему или зарегистрируйтесь!
    </div>
    <div class="card-footer">
        <button class="btn btn-link m-y-0 p-a-0 card-link" data-toggle="modal" data-target="#drawer-log-in">Войти</button>
        <button class="btn btn-link m-y-0 p-a-0 card-link" data-toggle="modal" data-target="#drawer-log-in">Регистрация</button>
    </div>
{% endmacro %}

{# вывод блока collapse #}
{% import _self as body %}
{% import '::collapse.html.twig' as collapse %}
{{ collapse.tablist([
    collapse.card(
        'Группа',
        form.groups.vars.value is not empty,
        'accordion',
        'collapseJanr',
        body.form(form.groups)
    ),
    collapse.card(
        'Фильтр по названию',
        form.query.vars.value is not empty,
        'accordion',
        'filterByName',
        body.form(form.query)
    ),
    collapse.card(
        'Тип игры',
        form.content_types.vars.value is not empty,
        'accordion',
        'collapseTwo',
        body.form(form.content_types)
    ),
    collapse.card(
        'Возраст',
        form.age_ratings.vars.value is not empty,
        'accordion',
        'collapseOne',
        body.form(form.age_ratings)
    ),
    collapse.card(
        'Совет',
        true,
        'accordion',
        'collapseHelp',
        body.login()
    ),
], 'accordion') }}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question