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

Posted 2023-02-19

【中文标题】如何在 Storybook 的控件插件中获得下拉菜单？

【英文标题】：How do I get dropdown in controls addon for Storybook?

【发布时间】：2020-12-17 19:43:42

【问题描述】：

我想得到这个：

我的 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 组件。

【参考方案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

【讨论】：

Storybook v7：您可以将options 数组作为color 的子元素和control 的兄弟元素移动。这也适用于 Storybook v6.2

【参考方案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 ,
  ,
;