故事书动态argTypes选项

Question

我有这样的故事：

const meta: Meta<typeof forwardRef<HTMLButtonElement, IButtonProps>> = {
    title: 'Atoms/Button',
    component: Button,
    argTypes: {
        size: args({ control: 'select', ...propCategory.appearance }),
        appearance: args({ control: 'select', ...propCategory.appearance }),
        text: args({ control: 'text', ...propCategory.content }),
        displayType: args({control: 'select', ...propCategory.appearance}),
        fullWidth: args({ control: 'boolean', ...propCategory.appearance }),
        iconAfter: args({ control: 'boolean', ...propCategory.appearance }),
        className: args({ control: 'false', ...propCategory.appearance }),
        disabled: args({ control: 'boolean', ...propCategory.states }),
        isLoading: args({ control: 'boolean', ...propCategory.states }),
        Icon: args({ control: 'false', ...propCategory.content }),
        name: args({ control: 'false', ...propCategory.functionality }),
        onClick: args({ control: 'false', ...propCategory.action })
    },
    args: {
        text: 'Button',
        appearance: 'primary',
        size: 'large',
        displayType: 'fill',
        isLoading: false
    }
};
export default meta;

const Template: FC<IButtonProps> = (args) => <Button {...args} />;

export const Default = Template.bind({});

我需要动态控制选项。例如，如果外观选择的选项是“主要”，则显示类型选项只能是[“填充”]，如果外观选择的选项是“危险”，则显示类型选项可以是[“轮廓”，“文本”]，这样对于我所有的外观选项 ['primary' | '次要' | '危险' | '成功' | '逆' | ‘透明’]

故事书版本7.6

提前谢谢您。

Answer 1

我看到了你的问题，我留下了我的意见。 要动态控制 Storybook 中的 argTypes，您可以探索使用 dependentOn 功能或具有 control 属性的自定义函数。此设置允许您根据另一个控件的值调整可用选项。

但是，截至 2023 年 10 月，Storybook 不提供直接方法来处理 argTypes 中的动态选项。但别担心！您可以通过在故事中使用装饰器来实现类似的结果。