Storybook 变体插件

以网格形式显示组件的所有变体

• 📦 无需额外代码即可创建变体。
• 📝 通过 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 等工具一次性捕获所有变体的快照时。