storybook - React Storybook 中不可见的面板

Question

我在运行节点版本 6.3.1 和 npm 版本 3.10.6 的 Windows 7 上使用Storybook版本 3.3.15。

在运行故事书时，我在呈现操作面板的页面底部看到“没有可用的面板”消息。我已经导入addon-actionsaddons.js:import @storybook/addon-actions/register并且该模块也存在于node_modules文件夹中。在 webpack 编译或浏览器控制台中，我没有收到任何关于此的错误。

如何使操作面板出现？

注意：我无法更新 Node 和 NPM 版本，因为我正在开发一个涉及很多人的专业级应用程序，而且它的代码库非常大。

score 57 · Accepted Answer

在我的情况下，它们只是被隐藏并且方向错误。不得不使用D和A键盘快捷键使它们再次出现。

score 32 · Accepted Answer

32

d就我而言，只是打了

于 2020-03-04T17:32:59.770 回答

score 8 · Accepted Answer

对我来说，整个主菜单一下子就消失了。唯一有帮助的是sessionStorage.clear()在控制台中运行，然后刷新页面。

score 5 · Accepted Answer

首先，检查您是否在 Stoybook UI 屏幕左上角的下拉菜单中将插件面板设置为显示/隐藏，还检查名为“更改插件方向”的下拉项目（我的已更改并被撞出屏幕因为屏幕宽度）。

如果这不起作用，请尝试在 storybook config.js 文件中设置选项：

在 Storybook config.js 文件中，您可以为一些默认设置添加选项参数，这包括设置插件面板的可见性和位置。

import { addParameters } from '@storybook/react';

// settings for storybook - show and position addon panel
addParameters({
  options: {
    // display panel that shows addon configurations
    showPanel: true,
    // where to show the addon panel --- @type {('bottom'|'right')}
    panelPosition: 'bottom',
  }
});

score 5 · Accepted Answer

就我而言，我丢失了.storybook/addons.js文件。看起来这在最近的版本中成为了一项要求，因为操作插件最初对我来说很好用。

为了澄清潜在的混淆：

正如文档指定的那样，您需要addons.js在隐藏.storybook/目录中有一个文件（很可能位于项目的根目录），即使它包含的只是这 1 行。

import '@storybook/addon-actions/register';

score 1 · Accepted Answer

我只是通过尝试键盘上的不同键才发现的：

如果您按“S” - 它会在StoryBook Of 和On中切换侧边栏！试试看！

我的浏览器：Chrome，操作系统：Mac OS

score 0 · Accepted Answer

我有一个类似的问题，安装@storybook/addons（除了你提到的步骤）修复了它。

跑：

npm i -D @storybook/addons

score 0 · Accepted Answer

0

在 Mac 中，我通过按 fn + s 解决了它。

于 2020-08-13T08:32:46.210 回答

score 0 · Accepted Answer

我遇到了这个问题；点击 S 会在不显示侧边栏的情况下移动我的组件，即使在清除了我之后localStorage，sessionStorage我也几乎看不到侧边栏的边缘。

然后，我意识到我已经放大以更仔细地查看我的组件，并且侧边栏正在隐藏/显示，但只是在屏幕外......我只需要缩小。‍♂️</p>

在这里分享，以防有人犯同样的错误。

storybook - React Storybook 中不可见的面板

9 回答 9

Related

Reference