Storybook Addon Codepen

通过点击按钮在 Codepen 上打开一个 pen，预填充你的故事的 HTML 和 CSS。

安装

在你的 Storybook 项目的根目录中，运行以下任一命令：

npm i -D storybook-addon-codepen

或

yarn add storybook-addon-codepen

然后，将以下内容添加到你的 .storybook/main.js 文件中

export default {
  addons: ['storybook-addon-codepen'],
};

假设 & 限制

开发此插件是为了在你想要分享单个故事的内容时使用，无论是寻求帮助还是创建最小使用案例，但由于某些原因无法分享完整的 Storybook。插件不会让你复制粘贴到别处，而是会从你的故事中提取完整的故事标题、渲染后的 HTML 以及所有定义的 <style> 标签内容，并使用这些内容预填充 Codepen 上的一个新 pen。

• 使用时不需要 Codepen 账户。
• 更改传递给故事的 args，无论是通过 Controls 面板、URL 参数还是其他方式，都将在生成的 pen 中正确反映，前提是这些更改发生在打开 pen 之前。（如果更改发生在之后，则需要打开一个新的 pen 才能看到变化。）
• 发送到 Codepen 的内容中有意不包含 JavaScript。因为 Storybook 支持许多工具，它们在未压缩时（通常在开发环境中）需要大型框架包，并且因为单个组件所需的 JavaScript 可能分散在预览 iframe 中的多个包中，难以有效地选择，因此此插件选择在打开 pen 时省略 JavaScript。如果你的故事需要交互式 JavaScript，你需要手动将其移入 pen 中。