功能和行为

要控制 Storybook UI 的布局，您可以使用 addons.setConfig 在您的 .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 值

名称	类型	描述	示例值
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`