在 Storybook 中隐藏文档选项卡答案

【问题标题】：Hide Docs tab in Storybook在 Storybook 中隐藏文档选项卡
【发布时间】：2020-12-09 11:19:51
【问题描述】：

我想同时使用 Typescript 和 MDX 创建故事，因此我的 main.js 中有：

module.exports = {
  stories: ['../src/**/*.stories.(mdx|ts)'],
  addons: ['@storybook/addon-docs', 'storybook-addon-preview']
};

但是我不想在“Canvas”旁边有“Docs”标签。如何删除它？如果没有'@storybook/addon-docs'，则不会显示 MDX 故事。

【问题讨论】：

也许这个答案会有所帮助：stackoverflow.com/a/60897150/1241287
完美答案stackoverflow.com/a/66188323/8798220

标签： storybook mdxjs

【解决方案1】：

我目前正在使用@storybook/angular@6.0.21，不幸的是，以前的答案对我不起作用。我找到了solution in the storybook DocsPage documentation。

相关部分：

You can replace DocsPage at any level by overriding the docs.page parameter:

- With null to remove docs
- With MDX docs
- With a custom React component

我能够为这样的单个故事完全删除 DocsPage：

export const myStory = () => ({
  moduleMetadata: MODULE_METADATA,
  component: MyComponent,
});
myStory.parameters = {
  docs: { page: null },
};

【讨论】：

【解决方案2】：

把这个放到preview.js:

export const parameters = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: true
    }
  }
};

用于 Storybook 6.0.x 版

【讨论】：

这也适用于个别故事。谢谢