Annonce de Stimulus FX : options d'action personnalisées pour Stimulus

Cet article a été initialement publié sur Rails Designer

---

Récemment, j'ai publié un article sur les options d'action personnalisées dans Stimulus. Il explique comment vous pouvez les utiliser pour créer des actions plus avancées avec du JavaScript personnalisé. C'est plutôt chouette, consultez l'article si vous voulez en savoir plus !

En écrivant l'article et en examinant mes propres applications pour obtenir des exemples, j'ai remarqué que je répétais fréquemment les mêmes options d'action personnalisées. En tant que développeur, ce genre de répétition a commencé à me mettre mal à l'aise. J'ai donc décidé ce que tout développeur sensé déciderait : les emballer ! ? ?

Voici donc : Stimulus FX. C'est également sur GitHub et NPM.

L'utilisation est simple. Après avoir ajouté le package à l'aide de votre outil préféré, tout ce dont vous avez besoin est :

// Import everything
import { registerActionOptions } from "stimulus-fx";
registerActionOptions(application);

// Or import specific actions
import { whenOutside } from "stimulus-fx/actions";
application.registerActionOption("whenOutside", whenOutside);

Ensuite, pour l'option whenOutside, dans votre HTML vous pouvez l'utiliser comme ceci :

<div data-controller="dropdown">
  <ul data-dropdown-target="menu" data-action="click@window->dropdown#hide:whenOutside">
  </ul>
</div>

Stimulus FX propose actuellement 4 jolies options d'action, mais je prévois d'en ajouter d'autres bientôt ! C'est aussi OSS, alors aidez-moi à l'améliorer ! ❤️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!