如何在Storybook所有页面默认隐藏canvas/docs面板

完全可以通过配置实现需求，不需要依赖快捷键手动操作，支持全局所有页面生效、指定特定页面生效两种模式：

全局默认隐藏面板（所有页面生效） #

打开项目下.storybook/preview.js配置文件（TypeScript项目对应为.storybook/preview.ts），添加如下参数即可：

export default {
  parameters: {
    options: {
      // 设为false即可默认隐藏canvas/docs对应的插件操作面板
      showPanel: false,
      // 可选：配置默认进入的视图，不需要手动切换canvas/docs标签
      // defaultViewMode: 'docs' // 可选值 'canvas' / 'docs'
    },
    // 可选：如果需要直接隐藏某类标签页（比如完全隐藏docs入口），可以打开下方配置
    // docs: { page: null }
  }
}

配置保存后重启Storybook服务，所有页面加载时都会默认隐藏对应面板。

指定特定页面隐藏面板 #

如果不需要全局生效，只想给指定组件、指定Story页面配置默认隐藏规则，直接在对应的.stories.js/.stories.ts文件中配置参数即可：

// 给当前组件文件下的所有Story生效
export default {
  title: 'Example/YourComponent',
  component: YourComponent,
  parameters: {
    options: {
      showPanel: false
    }
  }
}

// 仅给当前文件下某一个单独的Story生效
export const CustomStory = {
  parameters: {
    options: {
      showPanel: false
    }
  },
  render: () => <YourComponent />
}

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