Composants

Cecil fournit une logique de composants pour vous donner le pouvoir de créer des "unités" de templates réutilisables.

Syntaxe des composants

Les composants ne sont que des templates Twig stockés dans le sous-répertoire components/ et peuvent être utilisés n'importe où dans vos templates :

{# /components/button.twig #}
<button {{ attributes.merge({class: 'rounded px-4'}) }}>
    {{ slot }}
</button>

La variable slot correspond à tout contenu que vous ajouterez entre la balise d'ouverture et la balise de fermeture.

Pour accéder à un composant vous devez utiliser la balise dédiée x suivie de : et du nom de fichier de votre composant sans extension :

{# /index.twig #}
{% x:button with {class: 'text-white'} %}
    <strong>Click me</strong>
{% endx %}

Il rendra :

<button class="text-white rounded px-4">
    <strong>Click me</strong>
</button>