Les composants Blade

Les composants Blade permettent de créer des morceaux de vues réutilisables dans une application Laravel. Ils sont particulièrement utiles pour les éléments d’interface utilisateur qui apparaissent fréquemment, tels que les boutons, les cartes, les formulaires, etc.

Création d’un composant Blade

Pour créer un composant Blade, vous pouvez utiliser la commande Artisan suivante :

php artisan make:component NomDuComposant

Cela créera deux fichiers :

Un fichier de classe PHP dans app/View/Components/NomDuComposant.php
Un fichier de vue Blade dans resources/views/components/nom-du-composant.blade.php

La classe PHP peut contenir des propriétés et des méthodes pour gérer les données du composant, tandis que le fichier Blade contient le code HTML.

Il est également possible de créer des composants anonymes en créant simplement un fichier Blade dans le répertoire resources/views/components. Cela évite la création de la classe PHP si elle n’est pas nécessaire.

php artisan make:component NomDuComposant --view

Paramètres des composants

Les composants Blade peuvent accepter des paramètres pour rendre le composant plus dynamique. Par exemple, si vous avez un composant de bouton, vous pouvez lui passer des paramètres pour définir le texte du bouton, la couleur, etc.

Ces paramètres peuvent être définis dans la vue Blade du composant en utilisant la directive @props :

@props(['type' => 'button', 'label' => 'Cliquez-moi'])
<button type="{{ $type }}">{{ $label }}</button>

Le composant acceptera deux paramètres : type et label, avec des valeurs par défaut.

Le composant accepte aussi un contenu dynamique via la variable spéciale $slot :

<div class="card">
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

Dans certains cas, il peut être utile de définir des emplacements nommés pour le contenu dynamique. Cela peut être fait en utilisant la directive @isset :

<div class="card">
   @isset($header)
     <div class="card-header">
            {{ $header }}
      </div>
   @endisset
   <div class="card-body">
     {{ $slot }}
   </div>
   @isset($footer)
      <div class="card-footer">
        {{ $footer }}
      </div>
   @endisset
</div>

Utilisation des composants

Pour utiliser un composant Blade dans une vue, vous pouvez utiliser la syntaxe suivante :

<x-nom-du-composant type="submit" label="Envoyer" />

Si le composant accepte du contenu dynamique, vous pouvez l’inclure entre les balises d’ouverture et de fermeture :

<x-nom-du-composant>
    Contenu dynamique ici
</x-nom-du-composant>

Vous pouvez également passer du contenu aux emplacements nommés en utilisant la syntaxe suivante :

<x-nom-du-composant>
    <x-slot name="header">
        En-tête de la carte
    </x-slot>
    Contenu principal de la carte
    <x-slot name="footer">
        Pied de page de la carte
    </x-slot>
</x-nom-du-composant>

Pour plus d’informations sur les composants Blade, vous pouvez consulter la documentation officielle de Laravel : https://laravel.com/docs/master/blade#components