Playground

一个 Playground，让使用者学习如何使用组件库或复现错误

每周下载量

Playground - Storybook 插件

此插件通过允许您以交互方式使用组件来增强您的 Storybook 体验。它非常适合希望实时实验、调试问题或构建复杂组合的开发者。

安装

要安装此插件，请在您的项目目录中运行以下命令之一

yarn add -D storybook-addon-playground
# or
npm install -D storybook-addon-playground

配置

将插件添加到您的 Storybook 配置中，文件路径为 .storybook/main.js 或 .storybook/main.ts

const config = {
  addons: [
    // rest of your addons ...
    "storybook-addon-playground",
  ],
};

插件配置通过 Storybook 的 preview 参数完成。

参数	必需	默认值	描述
`storyId`	`true`		您的 playground 在 Storybook 中的故事 ID。
`components`	`true`		一个对象，包含应该在 playground 中渲染的组件。键是组件名称，值是组件本身。
`autocompletions`	`false`	`[]`	应在 playground 中使用的自动补全数组。建议使用 `react-docgen` 生成文档输出。
`editorTheme`	`false`	您的 Storybook 主题	应在 playground 中使用的主题。
`initialCode`	`false`	空编辑器	应在 playground 中渲染的初始代码（“welcome”）。
`share`	`false`	`false`	是否允许分享功能。

在您的 .storybook/preview.ts 文件中，您应该添加类似以下内容的代码

import MyComponentsLibrary from "my-components-library";
import MyIconsLibrary from "my-icons-library";
import reactDocgenOutput from "./react-docgen-output.json";
import { generateAutocompletions } from "storybook-addon-playground";

const preview = {
  parameters: {
    playground: {
      storyId: "playground",
      components: { ...MyComponentsLibrary, ...MyIconsLibrary },
      autocompletions: generateAutocompletions(reactDocgenOutput),
      editorTheme: "light",
      introCode: { jsx: `<div>Welcome to my Playground!</div>`, css: "" },
    },
  },
};

在您的 Storybook 故事中设置 playground 环境

import { withPlayground } from "storybook-addon-playground";

export default {
  title: "Playground",
  decorators: [withPlayground],
};

export const Playground = {};