Fragment ViewHelper <f:fragment>

f:fragment is the counterpart of the <f:slot> ViewHelper. It allows to provide multiple HTML fragments to a component, which defines the matching named slots. f:fragment is used directly inside a component tag, nesting into other ViewHelpers is not possible.

Default Fragment Example

If the following template Text.html:

<f:argument name="title" type="string" />

<div class="textComponent">
    <h2>{title}</h2>
    <div class="textComponent__content">
        <f:slot />
    </div>
</div>
Copied!

is rendered with the following component call:

<my:text title="My title">
    <f:fragment>
        <p>My first paragraph</p>
        <p>My second paragraph</p>
    </f:fragment>
</my:text>
Copied!

it will result in the following output:

<div class="textComponent">
    <h2>My title</h2>
    <div class="textComponent__content">
        <p>My first paragraph</p>
        <p>My second paragraph</p>
    </div>
</div>
Copied!

Multiple Named Slots

If the following template TextMedia.html:

<f:argument name="title" type="string" />

<div class="textMediaComponent">
    <h2>{title}</h2>
    <div class="textMediaComponent__media">
        <f:slot name="media" />
    </div>
    <div class="textMediaComponent__content">
        <f:slot name="content" />
    </div>
</div>
Copied!

is rendered with the following component call:

<my:textMedia title="My title">
    <f:fragment name="media">
        <img src="path/to/image.jpg" alt="..." />
    </f:fragment>
    <f:fragment name="content">
        <p>My first paragraph</p>
        <p>My second paragraph</p>
    </f:fragment>
</my:textMedia>
Copied!

it will result in the following output:

<div class="textMediaComponent">
    <h2>My title</h2>
    <div class="textMediaComponent__media">
        <img src="path/to/image.jpg" alt="..." />
    </div>
    <div class="textMediaComponent__content">
        <p>My first paragraph</p>
        <p>My second paragraph</p>
    </div>
</div>
Copied!

Go to the source code of this ViewHelper: FragmentViewHelper.php (GitHub).

Arguments

The following arguments are available for the fragment ViewHelper:

name

name
Type
string
Default
'default'
Name of the slot that should be filled