@storybook/addon-controls: 如何不为某个道具自动生成控件

Question

@storybook/addon-controls 很有趣，但是我找不到一种方法来禁用给定 arg 的控件生成。可以说我有一个组件道具，它是一个事件处理程序，我显然不希望它有一个控件。所以我希望它出现在道具列表中，带有名称、类型和描述，但没有控制。我该怎么做？

Answer 1

这是最近添加的：https://github.com/storybookjs/storybook/pull/11388 本质上，对于给定的参数，您应该能够在 argTypes 中使用 control.disable。

假设您有一个具有 foo 和 bar 属性（auto-generated 或其他）的故事，并且您想要完全隐藏 foo 行并禁用控件bar 特定故事的行：

MyStory.argTypes = {
  foo: { table: { disable: true } },
  bar: { control: { disable: true } },
};

这是 docs 中的条目。

干杯

Answer 2

大约一年前添加了参数的包含和排除 (link to the PR)。

在documentation中它被称为“过滤控件”。

您可以选择要包含的参数and/or按字符串、数组或正则表达式排除。

用法示例（来自文档）：

const Template = (args) => ({
    // Your template goes here
});

ArrayInclude = Template.bind({})
ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } };

RegexInclude = Template.bind({})
RegexInclude.parameters = { controls: { include: /^hello*/ } };

ArrayExclude = Template.bind({})
ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } };

RegexExclude = Template.bind({})
RegexExclude.parameters = { controls: { exclude: /^hello*/ } };

@storybook/addon-controls: 如何不为某个道具自动生成控件

@storybook/addon-controls: howto not auto-generate control for a certain prop

reactjs

storybook

用法示例（来自文档）：