storybook - 如何获得Storybook控件插件的下拉列表？

Question

我想得到这个:

我的stories.tsx代码如下所示:

export default {
  title: "Components/Switch",
  argTypes: {
    color: { control: "select", options: ["primary", "secondary"] },
  },
};

但是，当我这样做时，页面只是无法呈现。
重现:
克隆此存储库: https://github.com/jauggy/storybook-args-error npm i npm run storybook在左侧菜单上选择“开关”组件。

Answer 1

您应该将对象发送到control属性。像这样:

export default {
  title: "Components/Switch",
  argTypes: {
    color: { control: { type: "select", options: ["primary", "secondary"] },
  },
};

在Storybook v7控件之后更新。不建议使用选项以获取更多信息，请访问: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions