Passer au contenu principal

Créer des composants personnalisés en Laravel Nova

Laravel Nova permet aux développeurs de créer des composants personnalisés, améliorant ainsi la personnalisation et l'extensibilité. Cette fonctionnalité encourage la réutilisation du code, facilite l'intégration de fonctionnalités tierces, et offre un contrôle total sur le design et le fonctionnement des composants.

Tools

Les tools permettent d’intégrer des pages qui ne correspondent pas exactement au modèle des pages fournies par Nova. Ils peuvent être accessibles depuis la barre latérale de l'espace administrateur.

Pour implémenter un tool sur Laravel Nova :

  1. Créer un nouveau tool : php artisan nova:tool acme/price-tracker
  2. Installer les dépendances JS : npm install
  3. Compiler les assets : npm run dev
  4. Enregistrer le tool dans NovaServiceProvider

En ajoutant la méthode canSee lors de l’enregistrement, le contrôle d’accès sera appliqué à toutes les routes créées dans ce tool.

Toutes les routes du tool seront préfixées par le préfixe défini dans ToolServiceProvider du composant.

Resource Tools

Les ressource tools sont des composants affichés dans la page de détail d’une ressource.

Pour implémenter un resource tool sur Laravel Nova :

  1. Créer un nouveau resource tool : php artisan nova:resource-tool acme/stripe-inspector
  2. Installer les dépendances JS : npm install
  3. Compiler les assets : npm run dev
  4. Ajouter StripeInspector::make() dans la méthode fields d’une ressource Nova

Cards

Les cards sont des composants qui sont affichés en haut de votre tableau de bord, de votre page index ou de la page de détail d’une ressource.

Pour implémenter une card sur Laravel Nova :

  1. Créer une nouvelle card : php artisan nova:card acme/analytics
  2. Installer les dépendances JS : npm install
  3. Compiler les assets : npm run dev
  4. Enregistrer votre card dans la méthode cards de votre ressource Nova

Fields

Nova fournit une variété de types de champs. Cependant, vous aurez parfois besoin d’un type de champ qui n’existe pas par défaut. Pour cette raison, Nova vous permet de créer des champs personnalisés.

Les champs personnalisés se composent de trois composants Vue (DetailFieldFormField et IndexField) qui déterminent la manière dont le champ est affiché dans différents contextes.

Pour implémenter un champ personnalisé sur Laravel Nova :

  1. Créer un nouveau champ : php artisan nova:field acme/color-picker
  2. Installer les dépendances JS : npm install
  3. Compiler les assets : npm run dev
  4. Enregistrer votre champ dans la méthode fields de votre ressource Nova

Filters

Nova fournit plusieurs types de filtres. Cependant, vous aurez parfois besoin d’un type de filtre qui n’est pas fourni par défaut. Pour cette raison, Nova vous permet de créer des filtres personnalisés.

Pour implémenter un filtre sur Laravel Nova :

  1. Créer un nouveau filtre : php artisan nova:filter acme/age-range
  2. Installer les dépendances JS : npm install
  3. Compiler les assets : npm run dev
  4. Enregistrer votre filtre dans la méthode filters de votre ressource Nova

Assets

Les assets permettent de surcharger les composants existants.

En créant un composant personnalisé avec le même nom qu’un composant Nova existant, Nova utilisera automatiquement ce nouveau composant à la place de celui dans le répertoire vendor.

Pour implémenter un asset sur Laravel Nova :

  1. Créer un nouvel asset : php artisan nova:asset acme/analytics
  2. Installer les dépendances JS : npm install
  3. Compiler les assets : npm run dev

Les assets seront automatiquement chargés, donc aucun enregistrement n’est nécessaire.