reactjs 如何为Storybook中的控件设置自定义标签?

dgtucam1  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(168)

我尝试按照说明here,中的概述为Storybook中的控件设置自定义标签,但它没有按预期工作。根据说明,您可以指定control.labels来为复选框、单选按钮或选择输入配置自定义标签。
现在,我有一个大小的道具,允许用户选择组件的大小,但在Storybook中,它显示的是数字值,而不是名称。

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

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

如何更新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,

我同时获得名称和值,但只有名称有效

wrrgggsh

wrrgggsh1#

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

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;

相关问题