如何在Storybook中禁用Docs菜单入口及恢复旧版布局？

一、全局/单个Story禁用侧边栏Docs入口 #

1. 全局禁用 #

在.storybook/main.js（或.ts）中修改docs配置，关闭自动生成的侧边栏Docs入口：

module.exports = {
  docs: {
    autodocs: 'none'
  }
};

若使用TypeScript：

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  docs: {
    autodocs: 'none'
  }
};
export default config;

2. 单个Story禁用 #

在目标组件的Story meta配置中，通过参数关闭当前组件的Docs入口：

export default {
  title: 'Components/Button',
  component: Button,
  parameters: {
    docs: {
      autodocs: false
    }
  }
};

二、恢复旧版标签页式Docs展示 #

Storybook 7默认移除了顶部Docs标签页，可通过以下配置恢复：

在.storybook/preview.js（或.ts）中添加参数配置，强制开启顶部标签页切换模式：

export const parameters = {
  docs: {
    inlineStories: false,
    page: null,
    tab: 'story'
  },
  viewMode: 'story'
};

如果上述配置不生效，可通过自定义UI布局进一步调整（进阶操作），在.storybook/manager.js中修改导航布局：

import { addons } from '@storybook/addons';
import { create } from '@storybook/theming';

addons.setConfig({
  theme: create({
    // 可自定义主题样式适配标签页展示
  }),
  showNav: true,
  showPanel: true
});

注：部分配置可能随Storybook小版本更新略有变化，建议结合官方最新文档微调。

内容的提问来源于stack exchange，提问作者Qwerty