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

选择左侧菜单中的 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 },
  },
};