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

Question

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

Answer 1

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

假设您有一个带有foo和bar属性（自动生成或其他方式）的故事，并且您想foo完全隐藏该行并禁用bar特定故事上该行的控件：

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

这是文档中的条目。

干杯

Answer 2

大约一年前，添加了包含和排除参数（链接到 PR）。

在文档中，它被称为“过滤控件”。

您可以选择通过字符串、数组或正则表达式包含和/或排除哪些参数。

用法示例（来自文档）：

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*/ } };