Create an Addon
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion
Framework:
React

Preset

Activer Outline sur chaque story

Maintenant que nous nous sommes occupés du décorateur, utilisons un preset pour qu'il englobe chaque story.

Les presets vous permettent de combiner différentes configurations Storybook et de les appliquer d'un seul coup. Certains addons se chargent uniquement de configurer Storybook et n'ont aucune UI. Par exemple preset-create-react-app et preset-nuxt. Ce sont ce qu'on appelle des addons Preset.

Notre preset est divisé en deux parties :

  1. manager.js pour enregistrer l'addon
  2. preview.js pour définir des décorateurs globaux

Modifiez la prévisualisation afin de n'utiliser que le décorateur withGlobals pour l'appliquer automatiquement à toutes les stories.

src/preset/preview.js
import { withGlobals } from '../withGlobals';

export const decorators = [withGlobals];
Note : Le décorateur withRoundTrip de l'Addon Kit est un exemple de communication bidirectionnelle entre une story et un addon. Cependant, nous n'en avons pas besoin dans notre addon. Nous pouvons donc le supprimer

Succès ! Vous avez désormais un addon parfaitement fonctionnel sur votre Storybook local. Dans le chapitre final, apprenez à répertorier votre addon dans le catalogue pour le partager à votre équipe et à la communauté Storybook.

activer/désactiver l'addon affiche/masque les contours

Keep your code in sync with this chapter. View bdb7aaa on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Ajouter au catalogue
Partagez votre addon Storybook avec la communauté
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify