功能和行为

要控制 Storybook 的 UI 布局，您可以在 .storybook/manager.js 文件中使用 addons.setConfig。

.storybook/manager.js

import { addons } from '@storybook/manager-api';
 
addons.setConfig({
  navSize: 300,
  bottomPanelHeight: 300,
  rightPanelWidth: 300,
  panelPosition: 'bottom',
  enableShortcuts: true,
  showToolbar: true,
  theme: undefined,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  sidebar: {
    showRoots: false,
    collapsedRoots: ['other'],
  },
  toolbar: {
    title: { hidden: false },
    zoom: { hidden: false },
    eject: { hidden: false },
    copy: { hidden: false },
    fullscreen: { hidden: false },
  },
});

下表详细介绍了如何使用 API 值

名称	类型	描述	示例值
navSize	数字（像素）	显示 Story 列表的侧边栏的大小	`300`
bottomPanelHeight	数字（像素）	插件面板在底部位置时的尺寸	`200`
rightPanelWidth	数字（像素）	插件面板在右侧位置时的尺寸	`200`
panelPosition	字符串	显示插件面板的位置	`'bottom'` 或 `'right'`
enableShortcuts	布尔值	启用/禁用快捷键	`true`
showToolbar	布尔值	显示/隐藏工具栏	`true`
theme	对象	Storybook 主题，请参见下一节	`undefined`
selectedPanel	字符串	选择插件面板的 ID	`'storybook/actions/panel'`
initialActive	字符串	选择移动设备上的默认活动标签	`'sidebar'` 或 `'canvas'` 或 `'addons'`
sidebar	对象	侧边栏选项，请参见下方	`{ showRoots: false }`
toolbar	对象	使用插件 ID 修改工具栏中的工具	`{ fullscreen: { hidden: false } }`

以下选项可以在 sidebar 命名空间下配置

名称	类型	描述	示例值
showRoots	布尔值	在侧边栏中将顶级节点显示为“根”	`false`
collapsedRoots	数组	要默认情况下视觉上折叠的一组根节点 ID	`['misc', 'other']`
renderLabel	函数	为树节点创建自定义标签；必须返回一个 ReactNode	`(item, api) => <abbr title="...">{item.name}</abbr>`

以下选项可以在 toolbar 命名空间下配置

名称	类型	描述	示例值
id	字符串	切换工具栏项目的可见性	`{ hidden: false }`

通过 URL 参数进行配置

您可以使用 URL 参数配置一些可用的功能

配置选项	查询参数	支持的值
enableShortcuts	`shortcuts`	`false`
--- (全屏)	`full`	`true`, `false`
--- (显示侧边栏)	`nav`	`true`, `false`
--- (显示面板)	`panel`	`false`, `'right'`, `'bottom'`
selectedPanel	`addonPanel`	任何面板 ID
showTabs	`tabs`	`true`
---	`instrument`	`false`, `true`