如何禁用故事书中的“文档”选项卡?
Posted
技术标签:
【中文标题】如何禁用故事书中的“文档”选项卡?【英文标题】:How to disable 'Docs' tab in storybook? 【发布时间】:2020-05-12 22:45:34 【问题描述】:如何在每个故事的基础上禁用“文档”(插件文档)选项卡?
我尝试将以下关键值添加到故事中,但似乎没有任何效果。
parameters:
docs: disable: true, hidden: true
,
我正在运行 Storybook 5.3.8。
【问题讨论】:
【参考方案1】:旧答案为您提供隐藏 docs
的技术,但如果有人将 URL 从故事更改为文档,它将显示结果,所以我为您提供了完美的方法 remove
文档选项卡。
第一种方法
如果您将 @storybook/addon-docs
包添加到您的 package.json
并将其添加到 .storybook/main.js
(插件数组)中,则将其删除并 restart
您的故事书 webpack 服务器。
第二种方法
在最新版本的storybook
中,建议添加来自storybook
的essentials
插件包,其中包含多个插件,例如actions, backgrounds, controls, docs, viewport, toolbars
。
因此,如果您安装了该软件包并将其添加到 .storybook/main.js
插件数组中,那么您可以使用以下代码禁用它。
替换您的代码
module.exports =
addons: [
...,
'@storybook/addon-essentials',
],
;
到
module.exports =
addons: [
...,
name: '@storybook/addon-essentials',
options:
docs: false,
,
,
],
;
【讨论】:
嗨 Nisharg,您的回答将完全隐藏故事中的docs
选项卡。但是,问题要求删除单个故事中的docs
标签。
@SaiNikhil 是的,你是对的,但我在这里发帖是因为如果将来有人想要这个答案,那么她/她可以很容易地找到它
要删除单个故事中的文档选项卡,请参阅***.com/a/67002340/2307317【参考方案2】:
这将隐藏文档面板并仅显示画布:
parameters:
previewTabs:
'storybook/docs/panel':
hidden: true,
,
,
,
如果你只有一个标签,标签容器将被隐藏
【讨论】:
请注意,通过隐藏“文档”面板,当从不同组件的文档路径导航时,用户将无法查看目标组件上的“画布”,因为链接未更改:http://localhost:6006/?path=/docs/foo
【参考方案3】:
我设法用带有新参数的v6.0.0-alpha.28
(@storybook/*@next
) 做到了:
previewTabs:
docs: hidden: true ,
我在preview.js
上添加了默认配置:
addParameters(
previewTabs:
docs:
hidden: false
,
canvas:
title: 'Story',
hidden: false,
,
,
)
并将文档重新定位为manager.js
上的第一个选项卡:
import addons from '@storybook/addons';
addons.setConfig(
previewTabs:
'storybook/docs/panel': index: -1 ,
,
);
希望它长期有效:) 享受吧!
【讨论】:
以上是关于如何禁用故事书中的“文档”选项卡?的主要内容,如果未能解决你的问题,请参考以下文章