Define reusable components in Twig/Twital as in Vue/React style.
Install this library via composer:
composer install webuni/twig-componentsand enable in Twig environment:
use Twig\Environment;
use Webuni\TwigComponents\Twig\ComponentsExtension;
$twig = new Environment($loader, $options);
$twig->addExtension(new ComponentsExtension());Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
Add c: prefix to a Twital attribute to indicate value as a Twig code.
| Twig | Twital |
|---|---|
{% component "button.html.twig" as "button" %}
{% component "button" %}
…
{% endcomponent %} |
<c:component src="button.html.twig" as="button" />
<c:button>
…
</c:button> |
https://v3.vuejs.org/guide/component-basics.html#dynamic-components
| Twig | Twital |
|---|---|
{% component "button.html.twig" as "button" %}
{% component "group_button.html.twig" as "group_button" %}
{% component current_component %}
…
{% endcomponent %} |
<c:component src="button.html.twig" as="button" />
<c:component src="group_button.html.twig" as="group_button" />
<c:component c:is="current_component">
…
</c:component> |
| Twig | Twital |
|---|---|
<ul>
{% for index, item in items %}
<li>
{% slot bind "item" %}{{ item }}{% endslot %}
</li>
{% endfor %}
</ul>{% component "todo-list" %}
{% template bind "slot_context" %}
<i class="fas fa-check"></i>
<span class="green">{{ slot_context.item }}<span>
{% endtemplate %}
{% endcomponent %}{% component "todo-list" %}
{% template bind "{item}" %}
<i class="fas fa-check"></i>
<span class="green">{{ item }}<span>
{% endtemplate %}
{% endcomponent %} |
<ul>
<li t:for="index, item in items">
<c:slot bind="item">{{ item }}</c:slot>
</li>
</ul><c:todo-list>
<c:template bind="slot_context">
<i class="fas fa-check"></i>
<span class="green">{{ slot_context.item }}<span>
</c:template>
</c:todo-list><c:todo-list>
<c:template bind="{item}">
<i class="fas fa-check"></i>
<span class="green">{{ item }}<span>
</c:template>
</c:todo-list> |
<c:slot bind="item"></c:slot>
<c:slot bind="item = item"></c:slot>
<c:slot bind="{item}"></c:slot>
<c:slot bind="{item: item}"></c:slot>
<c:template slot="header" bind="item"></c:template>
<c:template slot="default" bind="item = item"></c:template>
<c:template bind="{item: item}"></c:template>Multiple
<c:slot bind="item, key"></c:slot>
<c:slot bind="item = item, key = key"></c:slot>
<c:slot bind="{item, key}"></c:slot>
<c:slot bind="{item: item, key: key}"></c:slot>Dynamic bind
<c:slot c:bind="{(item): 'item'}">{{ item }}</c:slot>