如何在 Storybook 中为控件设置自定义标签？答案

【问题标题】：How can you set custom labels for controls in Storybook?如何在 Storybook 中为控件设置自定义标签？
【发布时间】：2022-12-03 10:24:29
【问题描述】：

我正在尝试按照说明 here, 中的说明在 Storybook 中为我的控件设置自定义标签，但它没有按预期工作。根据说明，您可以指定 control.labels 来为您的复选框、单选框或选择输入配置自定义标签。

现在我有一个 size 道具，允许用户选择组件的大小，但在 Storybook 中它显示的是数字值而不是名称。例如

我希望标签从下面的枚举中读取名称，而不是数字值。

export enum sizes  {
  small = 32,
  default = 50,
  large = 100,
};

如何更新 Storybook 以使用枚举大小名称而不是值？

// storybook

export default {
title: 'Components/Spinner',
component: Spinner,
controls: { expanded: true },
argTypes: {
    type: {
        options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light'],
        control: { type: 'radio'},
    },
    size: {
        options: [sizes.default, sizes.small, sizes.large],
        control: {
            type: 'radio',
            labels: {
                Default: 'Default',
                Small: 'Small',
                Large: 'Large'
            },
        },
    }
}
} as Meta;

仅供参考：如果我将选项更新为以下内容：

 options: sizes,

我得到了名称和值，只有名称有效

【问题讨论】：

标签： reactjs typescript storybook

【解决方案1】：

万一其他人遇到这个问题，我通过手动输入值来解决它。根据这个 Stackoverflow post 枚举最终成为对象。所以它同时输出键和值。

export default {
title: 'Components/Spinner',
component: Spinner,
controls: { expanded: true },
argTypes: {
    type: {
        options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light'],
        control: { type: 'radio'},
    },
    size: {
        options: [32, 50, 100],
        control: {
            type: 'radio',
            labels: {
                32: 'small',
                50: 'default',
                100: 'large',
            },
        },
    }
}
} as Meta;

【讨论】：