功能和行为

要控制 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:

import { addons, type State } from 'storybook/manager-api';
 
addons.setConfig({
  navSize: 300,
  bottomPanelHeight: 300,
  rightPanelWidth: 300,
  panelPosition: 'bottom',
  enableShortcuts: true,
  showToolbar: true,
  theme: undefined,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  layoutCustomisations: {
    showSidebar(state: State, defaultValue: boolean) {
      return state.storyId === 'landing' ? false : defaultValue;
    },
    showToolbar(state: State, defaultValue: boolean) {
      return state.viewMode === 'docs' ? false : defaultValue;
    },
  },
  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:

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

¥The following options are configurable under the sidebar namespace:

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

¥The following options are configurable under the toolbar namespace:

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

¥The following options are configurable under the layoutCustomisations namespace:

自定义 UI

¥Customize the UI

Storybook 的 UI 高度可定制。通过 showSidebar、showPanel 和 showToolbar 函数提供的 API 和配置选项，你可以控制侧边栏、插件面板和工具栏元素的显示方式。每个函数都允许你包含一些默认行为，并且可以重写这些行为以根据你的需要自定义 UI。

¥Storybook's UI is highly customizable. Its API and configuration options, available via the showSidebar, showPanel and showToolbar functions, allow you to control how the sidebar, addon panel and toolbar elements are displayed. Each function will enable you to include some default behavior and can be overridden to customize the UI to your needs.

覆盖侧边栏可见性

¥Override sidebar visibility

侧边栏位于屏幕左侧，包含搜索功能和导航菜单。用户可以使用键盘快捷键显示或隐藏它。如果你想强制侧边栏在某些位置可见或隐藏，你可以在 layoutCustomisations 中定义一个 showSidebar 函数。以下是传递给此函数的可用参数以及如何使用它们的概述。

¥The sidebar, present on the left of the screen, contains the search function and navigation menu. Users may show or hide it with a keyboard shortcut. If you want to force the sidebar to be visible or hidden in certain places, you can define a showSidebar function in layoutCustomisations. Below are the available parameters passed to this function and an overview of how to use them.

import { addons, type State } from 'storybook/manager-api';
 
addons.setConfig({
  layoutCustomisations: {
    // Hide the sidebar on the landing page, which has its own nav links to other pages.
    showSidebar(state: State, defaultValue: boolean) {
      if (state.storyId === 'landing' && state.viewMode === 'docs') {
        return false;
      }
 
      return defaultValue;
    },
  },
});

配置插件面板

¥Configure the addon panel

查看故事时，Storybook 会在 UI 的底部或右侧显示插件面板。面板显示可用插件的用户界面（例如，交互面板、辅助功能测试面板 或 控制面板）。如果你想自定义插件面板的显示时间，可以使用 showPanel 函数。下面列出了可用的选项及其使用方法概述。

¥When viewing a story, Storybook displays the addon panel on the bottom or right of the UI. The panel shows UIs for available addons (e.g., the interactions panel, accessibility tests panel or controls panel). If you want to customize when the addon panel appears, you can use the showPanel function. Listed below are the available options and an overview of how to use them.

import { addons, type State } from 'storybook/manager-api';
 
addons.setConfig({
  layoutCustomisations: {
    showPanel(state: State, defaultValue: boolean) {
      const tags = state.index?.[state.storyId]?.tags ?? [];
 
      // Hide the panel on stories designed to showcase multiple variants or usage examples.
      if (tags.includes('showcase') || tags.includes('kitchensink')) {
        return false;
      }
 
      return defaultValue;
    },
  },
});

配置工具栏

¥Configure the toolbar

默认情况下，Storybook 会在 UI 顶部显示一个工具栏，允许你从插件（例如 viewport、background）或自定义 menus 访问菜单。但是，如果你想自定义工具栏的行为，可以使用 showToolbar 函数。下面列出了可用的选项及其使用方法概述。

¥By default, Storybook displays a toolbar at the top of the UI, allowing you to access menus from addons (e.g., viewport, background), or custom defined menus. However, if you want to customize the toolbar's behavior, you can use the showToolbar function. Listed below are the available options and an overview of how to use them.

import { addons, type State } from 'storybook/manager-api';
 
addons.setConfig({
  layoutCustomisations: {
    // Always hide the toolbar on docs pages, and respect user preferences elsewhere.
    showToolbar(state: State, defaultValue: boolean) {
      if (state.viewMode === 'docs') {
        return false;
      }
 
      return defaultValue;
    },
  },
});

通过 URL 参数进行配置

¥Configuring through URL parameters

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

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