Storybook Variants 擴充功能

在網格中顯示元件的所有變體

• 📦 建立變體無需額外程式碼。
• 📝 從 Controls 表格和編輯器進行編輯會重新渲染所有變體。

開始使用

首先安裝它

npm install storybook-addon-variants

在你的 main.js 檔案中註冊擴充功能

// .storybook/main.js

module.exports = {
  stories: [...],
  addons: ["storybook-addon-variants"],
};

啟用你的元件變體

有兩種方法可以做到

1. 透過使用工具列按鈕

2. 透過在你的 Story 中定義一個參數

// /MyComponent.stories.js

// ...rest of code omitted for brevity

// CSF2 syntax example
export const MyStory = Template.bind({})
MyStory.parameters = {
  variants: {
    enable: true
  }
};

// or CSF3 syntax example
export const MyStory = {
  parameters: {
    variants: {
      enable: true
    }
  }
};

透過定義這個參數，這個 Story 將始終渲染所有變體，無論你在工具列中選擇什麼。

如果你想要在側邊欄中顯示所有變體的固定 Story，此方法非常有用。當你想要使用像 Chromatic 之類的工具一次性拍攝所有變體的快照時，它對於視覺迴歸測試特別有用。