In Vue.js I can define named slots for my components, besides my default slot:
<article>
<header>
<slot name="header">
<h2>Default heading</h2>
</slot>
</header>
<slot/>
</article>
and then use it like this:
<template>
<FooArticle v-for="item in items">
<template #heading>
<h3>{{item}} Heading</h3>
</template>
<p>Just content</p>
</FooArticle>
</template>
<script>
export default {
name: 'App',
components: {
FooArticle
},
data() {
return {
items: ['First', 'Second']
}
}
}
</script>
Is this possible with Neos Fusion, to create a mechanism like this?
Yes this is possible, as you can use the
@path
decorator to overwrite a property of the wrapper element.First you define your props and then output them in the renderer.
Then you want to override these "slots" (props) from the outside with the
@path
decorator. The whole element the decorator is defined on will override the specified prop "heading" of the wrapping element.FYI, we use a
Neos.Fusion:Fragment
object to define the path decorator, so the fragment does not render any additional markup like an enclosing<div>
. In this simple case, where we only want to render a single element into the slot, we could have omitted the fragment and just set the@path="heading"
directly to the<h3>
.Working example in FusionPen
Fusion AFX Docs
Neos Fusion Docs