功能和行为

要控制 Storybook 的 UI 布局，你可以在 .storybook/manager.js 中使用 addons.setConfig：

¥To control the layout of Storybook’s UI you can use addons.setConfig in your .storybook/manager.js:

.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 值：

¥The following table details how to use the API values:

名称	类型	描述	示例值
navSize	数字（像素）	显示故事列表的侧边栏的大小	`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 命名空间下配置：

¥The following options are configurable under the sidebar namespace:

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

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

¥The following options are configurable under the toolbar namespace:

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

通过 URL 参数进行配置

¥Configuring through URL parameters

你可以使用 URL 参数来配置一些可用的功能：

¥You can use URL parameters to configure some of the available features:

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