功能與行為

若要控制 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	數字 (像素)	顯示 stories 清單的側邊欄大小	`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`