laravel view components

CE FORFAIT A ÉTÉ ABANDONNÉ

Une meilleure façon de connecter les données avec le rendu des vues dans Laravel

Les composants de vue sont un moyen d'aider à organiser la logique liée à la vue, similaire aux compositeurs de vues.

 namespace App  Http  ViewComponents ;

use Illuminate  Http  Request ;
use Illuminate  Contracts  Support  Htmlable ;

class NavigationComponent implements Htmlable
{
    /** IlluminateHttpRequest */
    private $ request ;

    /** @var string */
    private $ backgroundColor ;

    public function __construct ( Request $ request , string $ backgroundColor )
    {
        $ this -> request = $ request ;
        $ this -> backgroundColor = $ backgroundColor ;
    }

    public function toHtml (): string
    {
        return view ( ' components.navigation ' , [
            ' activeUrl ' => $ this -> request -> url (),
            ' backgroundColor ' => $ this -> backgroundColor ,
        ]);
    }
}

 @render ( ' navigationComponent ' , [ ' backgroundColor ' => ' black ' ] )

Un composant de vue peut être tout ce qui implémente le contrat Htmlable de Laravel, vous n'avez donc pas nécessairement besoin d'utiliser les vues Blade pour restituer le composant. Ceci est utile pour envelopper des packages HTML tiers, comme spatie/laravel-menu.

 namespace App  Http  ViewComponents ;

use Illuminate  Contracts  Support  Htmlable ;
use Illuminate  Contracts  Auth  Guard ;
use Spatie  Menu  Laravel  Menu ;

class MainMenuComponent implements Htmlable
{
    /** @var IlluminateContractsAuthGuard */
    private $ guard ;

    /** @var string */
    private $ class ;

    public function __construct ( Guard $ guard , string $ class = null )
    {
        $ this -> guard = $ guard ;
        $ this -> class = $ class ;
    }

    public function toHtml (): string
    {
        $ menu = Menu:: new ()
            -> addClass ( $ this -> class )
            -> url ( ' / ' , ' Home ' )
            -> url ( ' /projects ' , ' Projects ' );

        if ( $ this -> guard -> check ()) {
            $ menu -> url ( ' /admin ' , ' Adminland ' );
        }

        return $ menu ;
    }
}

 @render ( ' mainMenuComponent ' , [ ' class ' => ' background-green ' ] )

L'avantage par rapport aux compositeurs de vues est que les données et la logique de rendu sont explicitement liées ensemble dans des composants au lieu d'être connectées ultérieurement. Ils vous permettent également de combiner de manière transparente les propriétés et l’injection de dépendances.

Ce package est basé sur Introducing View Components in Laravel, une alternative à View Composers de Jeff Ochoa.

Soutenez-nous

Nous investissons beaucoup de ressources dans la création des meilleurs packages open source de leur catégorie. Vous pouvez nous soutenir en achetant l'un de nos produits payants.

Nous apprécions grandement que vous nous envoyiez une carte postale de votre ville natale, mentionnant le(s) forfait(s) que vous utilisez. Vous trouverez notre adresse sur notre page contact. Nous publions toutes les cartes postales reçues sur notre mur virtuel de cartes postales.

Installation

Vous pouvez installer le package via composer :

composer require spatie/laravel-view-components

Aucune configuration supplémentaire nécessaire. Laravel découvrira et enregistrera automatiquement le fournisseur de services.

Vous pouvez éventuellement publier le fichier de configuration avec :

php artisan vendor:publish --provider= " SpatieViewComponentsViewComponentsServiceProvider " --tag= " config "

C'est le contenu par défaut du fichier qui sera publié dans config/view-components :

 return [
    /*
     * The root namespace where components reside. Components can be referenced
     * with camelCase & dot notation.
     *
     * Example: 'root_namespace' => AppHttpViewComponents::class
     *
     * `@render('myComponent')
     *     => `AppHttpViewComponentsMyComponent`
     */
    ' root_namespace ' => ' AppHttpViewComponents ' ,

    /*
     * Register alternative namespaces here, similar to custom view paths.
     *
     * Example: 'navigation' => AppServicesNavigation::class,
     *
     * `@render('navigation::mainMenu')`
     *     => `AppServicesNavigationMainMenu`
     */
    ' namespaces ' => [
        // 'navigation' => AppServicesNavigation::class,
    ],
];

Usage

La directive @render

La directive @render Blade accepte deux arguments : le premier est le chemin ou le nom de classe du composant de vue, le second est un ensemble supplémentaire de propriétés (facultatif).

Vous pouvez choisir entre référencer le composant via un chemin ou un nom de classe.

 @render ( ' myComponent ' )
@render ( App  Http  ViewComponents MyComponent :: class )

Les paramètres seront injectés dans la méthode __construct des composants de vue. Le composant est instancié avec le conteneur de Laravel, donc les paramètres qui ne sont pas fournis par le rendu seront automatiquement injectés.

 use Illuminate  Http  Request ;

class MyComponent implements Htmlable
{
    public function __construct ( Request $ request , string $ color )
    {
        $ this -> request = $ request ;
        $ this -> color = $ color ;
    }

    // ...
}

 @render ( ' myComponent ' , [ ' color ' => ' red ' ] )

Dans l'exemple ci-dessus, $color est explicitement défini et un objet $request sera injecté par Laravel.

Configuration

L'espace de noms racine

En configurant root_namespace , vous pouvez définir l'emplacement de la majeure partie de vos composants de vue. Par défaut, cela se trouve dans AppHttpViewComponents .

 app/
  Http/
    ViewComponents/
      MyComponent.php
      Nested/
        NestedComponent.php

Les composants ci-dessus peuvent être rendus avec @render('myComponent') et @render('nested.nestedComponent') .

Espaces de noms supplémentaires

Vous pouvez enregistrer des espaces de noms supplémentaires dans la configuration namespaces , de la même manière que les chemins d'affichage.

 return [
    ' namespaces ' => [
        ' navigation ' => App  Services Navigation::class,
    ],
];

 app/
  Services/
    Navigation/
      Menu.php

Le composant Menu ci-dessus peut désormais être rendu avec @render('navigation::menu') .

Essai

composer test

Journal des modifications

Veuillez consulter CHANGELOG pour plus d'informations sur ce qui a changé récemment.

Contribuer

Veuillez consulter CONTRIBUER pour plus de détails.

Sécurité

Si vous découvrez des problèmes liés à la sécurité, veuillez envoyer un e-mail à [email protected] au lieu d'utiliser le suivi des problèmes.

Crédits

• Sébastien De Deyne
• Tous les contributeurs

Licence

La licence MIT (MIT). Veuillez consulter le fichier de licence pour plus d'informations.