Create an Addon
  • Introducción
  • Configuración
  • Registrar complemento
  • Seguimiento de Estado
  • Decoradores
  • Preajuste
  • Agregar al catálogo
  • Conclusión
Framework:
React

Preajuste

Habilita Outline (contorno) para cada historia

Ahora que terminamos el decorador, usemos un preajuste que envuelva cada historia.

preset-create-react-app y preset-nuxt. Estos se denominan complementos preestablecidos.

Los preajustes permiten combinar varias configuraciones diferentes de Storybook y aplicarlas de una vez. Algunos complementos son puramente responsables de configurar Storybook y no contienen UI.Por ejemplo, preset-create-react-app y preset-nuxt. Estos se denominan Preset addons (Complementos preajustados).

Nuestro preajuste se divide en dos partes:

  1. manager.js para registrar el complemento
  2. preview.js Para especificar decoradores globales

Actualiza la vista previa para usar solo el decorador withGlobals, que automáticamente envolverá todas las historias.

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

export const decorators = [withGlobals];
Nota: el decorador withRoundTrip del Addon Kit es un ejemplo de comunicación bidireccional entre la historia y un complemento. Sin embargo, no es necesario para nuestro complemento y podemos eliminarlo.

¡Éxitos! Ahora tienes un complemento completamente funcional en tu Storybook local. En el capítulo final, aprende a incluir tu complemento en el catálogo. De esa manera, puedes compartirlo con tu equipo y con la comunidad de Storybook.

toggling the tool toggles the outlines

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
Agregar al catálogo
Comparte tu complemento de Storybook con la comunidad
✍️ 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