Storybook 擴充套件 Codepen

按一下按鈕，在 Codepen 上開啟一個 pen，其中預先填入您 story 的 HTML 和 CSS。

安裝

在您的 Storybook 專案的根目錄中，執行以下任一命令

npm i -D storybook-addon-codepen

或

yarn add storybook-addon-codepen

然後，將以下內容新增至您的 .storybook/main.js 檔案

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

假設與限制

此擴充套件是為當您想要分享單一 story 的內容時所建置，無論是為了尋求協助或是建立最小的使用案例，但由於某些原因無法分享完整的 Storybook。此擴充套件將會從您的 story 中提取完整的 story 標題、呈現的 HTML，以及任何已定義的 <style> 標籤的內容，並使用它們來預先填寫 Codepen 上新的 pen，而無需到其他地方複製貼上。

• 使用時不需要 Codepen 帳戶。
• 通過控制面板、URL 參數或其他方式傳遞到 story 的 args 的變更，只要它們在開啟 pen 之前發生，就會正確地反映在產生的 pen 中。（如果它們在之後發生，則需要開啟新的 pen 才能看到變更。）
• JavaScript 有意不包含在傳送到 Codepen 的內容中。因為 Storybook 支援許多工具，這些工具在未縮小時需要大型的框架組合（它們在開發中很可能是未縮小的），而且單一元件所需的 JavaScript 可能會分散在預覽 iframe 中的多個組合中，因此很難有效地挑選，此擴充套件選擇在開啟 pen 時省略 JavaScript。如果您的 story 需要互動式 JavaScript，您需要手動將其移動到 pen 中。