storybook 为现有的控件(自动)发现性提供更多的微调控制,

uinbv5nw 于 3个月前发布在其他

关注(0)|答案(4)|浏览(44)

您的功能请求是否与问题相关？请描述

免责声明 - 这可能已经可行(如何？) - 直到现在，我还没有找到一种方法。
我目前使用Angular工作，但我相信这种能力适用于所有框架。目前，控件是通过@input(React中的props)绑定(自动发现)的，并与现有的类成员/函数关联。
这在许多情况下可能很有用，因为它可以自动发现所有字段/控件(可能用于快速创建“厨房Flume”类型的组件Playground)。
然而，组件通常会有许多@input(s),或其他成员或成员函数，其中许多可能在用Storybook测试组件时并不相关。目前，如果一个组件有30个成员，那么将有30个控件被“自动发现”，而当前禁用不需要的控件的方法是使用argTypes单独禁用每个控件/成员。因此，如果我只对其中的28个成员感兴趣，我需要提供样板argTypes来禁用不需要的28个控件。

描述您希望实现的解决方案

有一种机制可以批量包含/排除控件。也许你可以从tsconfig.json中的“include”和“exclude”部分中获得一些灵感。

描述您考虑过的替代方案

我了解到我可以使用argTypes单独禁用每个控件(排除也可以批量进行？)。

storybook

来源：https://github.com/storybookjs/storybook/issues/16284

4条答案

按热度按时间

uz75evzq1#

我正在尝试隐藏所有控件。
在默认的元级别上这是否有效？
我尝试了以下代码，无论是在默认的元级别还是在一个单独的故事中，都无法使其生效。
parameters: { controls: { exclude: /(.*?)/ }, },

赞(0）回复(0）举报 3个月前

fwzugrvs2#

@distributev,你有复制品吗？我刚刚在一个新项目中尝试了你的代码片段，它按照我的预期工作：

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    exclude: /(.*?)/, // <= added this line to my project
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

如果有用的话，请查看 how to create a repro 。

赞(0）回复(0）举报 3个月前

okxuctiv3#

@distributev@shilman 这个PR可以解决这个问题：#18549。在我的案例中，我只需要@inputs。

赞(0）回复(0）举报 3个月前

af7jpaap4#

你试过这个吗？
https://storybook.js.org/docs/react/essentials/controls#filtering-controls

赞(0）回复(0）举报 3个月前