Accueil » Symfony 6 Créer un Component

Symfony 6 Créer un Component

/ Symfony 6 / Par

Dans cette procédure, je vais vous expliquer comment créer un component (Composant) avec Symfony 6 et Twig. L’utilisation de components permet d’éviter les répétitions de code ainsi que de segmenter votre code dans des fichiers séparés, ce qui va rendre votre code plus lisible.

Logo Symfony

Prérequis :

Créer un Component avec Symfony 6 et Twig :

Tout d’abord nous allons importer deux librairies afin de pouvoir utiliser les components de Symfony 6: 

composer require symfony/ux-twig-component
composer require symfony/ux-live-component

Puis ajoutons les lignes suivantes à la fin du fichier assets/bootstrap.js :

import LiveController from '@symfony/ux-live-component';
import '@symfony/ux-live-component/styles/live.css';

app.register('live', LiveController);

Ensuite nous ajoutons le contenu suivant à la fin du fichier config/route.yaml :

live_component:
    resource: '@LiveComponentBundle/Resources/config/routing/live_component.xml'

Puis on crée le répertoire pour nos components : 

mkdir -p src/Components

Ensuite on peut créer notre premier component (src/Components/TaskListComponent.php) : 

<?php
// src/Components/TaskListComponent.php
namespace App\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent('tasklist')]
class TaskListComponent
{
    public array $tasks;
}

Puis on crée le répertoire dans lequel les components Twig vont être stockés (templates/components) :

mkdir -p templates/components

Ensuite on crée le Component Twig dans le nouveau dossier (templates/components/tasklist.html.twig) : 

{# templates/components/tasklist.html.twig #}
<ul>
    {% for task in tasks %}
        <li>{{ task.name }}</li>
    {% else %}
            <li>Il n'y a aucune tache.</li>
    {% endfor %}
</ul>

Puis dans vos fichiers Twig vous pouvez appeler votre component à l’aide du code suivant : 

{{ component('tasklist', { 'tasks': tasksArrayDataFromController }) }}

L’utilisation de components permet de réutiliser du code d’un projet à un autre, elle permet également de scinder son code en plusieurs fichiers ainsi la relecture de ce dernier se fera plus aisément.

Source :

https://symfony.com/bundles/ux-live-component/current/index.html

Susceptible de vous intéresser :