如何禁用故事书中的 'Docs' 选项卡？

Question

如何禁用每个故事的 'docs'（插件文档）选项卡？

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

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

我是运行故事书5.3.8.

Answer 1

我设法用 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 },
  },
});

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

Answer 2

这将隐藏文档面板并仅显示 canvas：

  parameters: {
    previewTabs: {
      'storybook/docs/panel': {
        hidden: true,
      },
    },
  },

如果您只有一个选项卡，选项卡容器将被隐藏

Answer 3

旧答案为您提供了隐藏 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,
      },
    },
  ],
};

Answer 4

在您的 MyStory.stories.j[t]sx 文件中

要隐藏 “文档” 选项卡：

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            'storybook/docs/panel': { hidden: true }
        },
        viewMode: 'canvas',
    }
};

要隐藏 "Canvas" 选项卡：

export default {
    title: 'YourTitle',
    parameters: {
        previewTabs: {
            canvas: { hidden: true},
        },
        viewMode: 'docs',
    }
};

viewMode: 'docs/canvas'有必要在该视图中设置默认选项卡，否则故事书将显示在上一个视图中打开的最后一个选项卡。

如何禁用故事书中的 'Docs' 选项卡？

How to disable 'Docs' tab in storybook?

storybook