如何禁用故事书中的“文档”选项卡？答案

【问题标题】：How to disable 'Docs' tab in storybook?如何禁用故事书中的“文档”选项卡？
【发布时间】：2020-05-12 22:45:34
【问题描述】：

如何在每个故事的基础上禁用“文档”（插件文档）选项卡？

我尝试将以下关键值添加到故事中，但似乎没有任何效果。

parameters: {
  docs: { disable: true, hidden: true }
},

我正在运行 Storybook 5.3.8。

【问题讨论】：

标签： storybook

【解决方案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 是的，你是对的，但我在这里发帖是因为如果将来有人想要这个答案，那么她/她可以很容易地找到它
要删除单个故事中的文档选项卡，请参阅stackoverflow.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 },
  },
});

希望它长期有效:) 享受吧！

【讨论】：