如何在 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

Select 左侧菜单中的 Switch 组件。

Answer 1

您应该向 control 属性发送一个对象。像这样：

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

更新在 Storybook v7 control.options 之后将被弃用有关更多信息，请访问：https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions

Answer 2

你也可以在那里提供 enum:

const SwitchTypeEnum {
    PRIMARY = "primary",
    SECONDARY = "secondary",
}

export default {
  title: "Components/Switch",
  argTypes: {
    table: {
        summary: "SwitchTypeEnum",
        defaultValue: { summary: "SwitchTypeEnum.PRIMARY" },
    },
    color: { control: { type: "select", options: SwitchTypeEnum },
  },
};

如何在 Storybook 的控件插件中获取下拉菜单？

How do I get dropdown in controls addon for Storybook?

storybook