您的功能请求是否与问题相关?请描述
Storybook 显示了大量自动生成的控件,用于所有属性(包括甚至私有属性)、属性、插槽、CSS阴影部分和自定义元素的事件。这为测试组件带来了很多噪音。
描述您希望实现的解决方案
添加一个选项,以禁用自动生成控件的渲染。
描述您考虑过的替代方案
我所知道的唯一其他方法是在 parameters: { controls: { include: [ ... ] } }
中白名单所需的控件。但那会带来很多不必要的重复输入。
您是否能够协助将该功能变为现实?
否
6条答案
按热度按时间oo7oh9g91#
对于那些正在寻找解决方案的人,我在上面提供的解决方法上进行了一个小改进。
假设你有一个带有
args
属性的故事MyComponent
,添加:这将白名单并仅显示在
MyComponent.args
中定义的控件。bpsygsoo2#
@tigrr — 很好的观点,尽管我的观点是,故事书中显示的属性可能被认为是相当好看的文档页面。我在寻找其他的东西:在UI中默认折叠所有不必要的表格——不幸的是,我没有找到一种简单的方法来做到这一点。也许值得在他们的Discord上询问关于这些可能性。
1yjd4xko3#
@tigrr 如果这些是web组件,那么我猜你已经从
custom-elements.json
生成了它们,并通过setCustomElementsManifest
设置。你可以在至少2个地方进行干预:
custom-elements.json
级别(如何生成)setCustomElementsManifest
上执行 Package 器在我的情况下,我做了两件事。
我通过
@custom-elements-manifest/analyzer
生成了custom-elements.json
,所以我可以使用cem
插件 - 这些都是公开可用的,以及一些我自己编写的自定义插件(它们相当容易编写)在
setCustomElementsManifest
的 Package 器上,我做了我在#15436中找到的一个变体(评论)希望这些能帮助你实现你的目标:)
2w3rbyxf4#
@jrencz ,这将完全移除这些属性。我希望它们(以及其他用途)出现在由Storybook自动生成的文档页面上。而@didnotwant ,这正是我想要所有属性都列出的地方,即文档页面,而不是故事控件。
j2qf4p5b5#
好的,现在我明白了。
顺便说一下:从现在开始,我想换个Angular 来看待这个问题——我只想要文档页面上的基本信息和完整的集合(或者一个专门的子集)在故事中。
这似乎是一个既能满足你的需求,也能满足我的解决方案,它更像是一个“烹饪食谱”(可能是以某种形式应用于故事的高阶函数——装饰器?),而不是要融入storybook的一个功能。
jecbmhm36#
我想要重申通过推断的
argTypes
从组件中禁用自动生成控件的愿望。我的一些组件正在使用 MUI 组件,我想锁定这些属性,但 Storybook 会自动推断这些属性并将它们呈现给我们的故事,渲染出许多我不想让开发者或贡献者看到的控件。在每个故事中设置几十个属性到
table: { disable: true }
确实不理想,所以能够关闭自动生成的控件将会很棒。更进一步的是,能够在故事级别上实现这种控制,而不是某种preview.js/.ts
参数。