storybook - 在故事书 6 中禁用每个故事的画布
问题描述
我正在尝试在新的故事书 6 中找到一种在故事级别禁用画布的方法。我正在制作一个组件库,并且根据故事的不同,其中一些只有画布,而另一些只有文档。
我试过使用
myStory.parameters = {
previewTabs: {
canvas: {
hidden: true,
},
},
};
或者
myStory.parameters = {
previewTabs: {
'storybook/docs/panel': {
hidden: false,
},
},
};
取决于故事。但是,这会导致不显示选项卡名称。因此,会发生以下情况:
- 我有故事 1 - 只有画布可见
- 我有故事 2 - 只有文档可见
- 我点击故事 1 - 我看到了画布,正如预期的那样
- 我点击故事 2 - 我也看到了画布,即使它是隐藏的(我想是因为该选项卡已从上一个故事中保留)。好像这还不够糟糕,我什至无法单击文档,因为没有可见的选项卡名称。
- 反过来也一样(如果我从故事 2 开始)
作为文档的解决方法,我发现了这个(感谢Benjamin,在这篇文章中):
myStory.parameters = {
docs: { page: null },
};
有了这个,我仍然可以看到画布和文档选项卡,但是对于设置了此参数的故事,文档选项卡现在是空的。
我正在寻找为画布做类似的事情,并尝试过
myStory.parameters = {
canvas: { page: null },
};
myStory.parameters = {
canvas: { disabled: true },
};
但没有工作。
解决方案
我不知道此解决方案是否符合您的需求,但我发现的解决方法是将我的故事写入.mdx
并禁用画布Meta
:
import { Meta } from '@storybook/addon-docs/blocks';
import { MyComponent } from './MyComponent';
<Meta
title="Section/MyComponent"
parameters={{
viewMode: 'docs',
previewTabs: {
canvas: { hidden: true }
},
}}
/>
# My markdown title
<Canvas>
<Story name="mycomponent">
<MyComponent />
</Story>
</Canvas>
推荐阅读
- apache-kafka - Kafka 消费者在生产者确认模式更改后停止消费消息
- python - Python:用于多维数组的 numpy.dot / numpy.tensordot
- angular - 不允许我将对象推入数组
- javascript - “TypeError:无法将未定义或 null 转换为对象”呈现嵌套 JSON
- r - 如何找到直方图一部分下的区域?
- firebase - Firebase Firestore 在物理设备上通过 wifi 故障转移并出现错误:无法访问 Cloud Firestore 后端
- java - 在 Java 中编写静态方法以使用循环返回字符串
- arrays - 快速将数组的子集设置为相同的值
- c# - 使用 API 未找到 Azure Devops 测试计划 ID
- python - 填充的 __init__ 似乎阻止访问同一包中的模块