Storybook Variants 插件

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

• 📦 创建变体无需额外代码。
• 📝 从 Controls 表格和编辑器进行编辑会重新渲染所有变体。

入门

首先安装它

npm install storybook-addon-variants

在你的 main.js 文件中注册插件

// .storybook/main.js

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

启用你的组件变体

有两种方法可以做到这一点

1. 使用工具栏按钮

2. 在你的故事中定义一个参数

// /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
    }
  }
};

通过定义此参数，此故事将始终渲染所有变体，而不管你在工具栏中选择什么。

如果你想在侧边栏中显示所有变体的固定故事，此方法非常有用。在使用 Chromatic 等工具进行视觉回归测试时，当你想要一次性对所有变体进行快照时，它特别有用。