portal.md

Portal Extension

The portal twig extension is inspired by react portals and allow to render content at a different position. It should help to solve z-index problems by rendering overlays outside of the other DOM elements.

Note: Limitation
The current implemented portals can only be used to render content after the current rendered item. So as example it is currently not possible to portal something from the body tag into the head tag. This is because twig supports to directly stream rendered code to the output via its display method, so that already outputted content can not be changed.

Setup

Service Registration

The twig extension need to be registered as symfony service.

services:
    Sulu\Twig\Extensions\PortalExtension: ~

If autoconfigure is not active you need to tag it with twig.extension.

Usage

You can use a portal to output content at another position:

<section class="containers">
    {% for i in 1..3 %}
        <div>
            {{- 'Title ' ~ i -}}
        </div>

        {% portal overlays %}
            <div>
                {{- 'Overlay ' ~ i -}}
            </div>
        {% endportal %}
    {% endfor %}
</section>

<section class="overlays">
    {{ get_portal('overlays') }}
</section>

Output:

<section class="containers">
    <div>Title 1</div>
    <div>Title 2</div>
    <div>Title 3</div>
</section>

<section class="overlays">
    <div>Overlay 1</div>
    <div>Overlay 2</div>
    <div>Overlay 3</div>
</section>